diff options
author | Ivan Chen <ivan@tagg.id> | 2021-07-08 16:01:56 -0400 |
---|---|---|
committer | Ivan Chen <ivan@tagg.id> | 2021-07-09 15:56:47 -0400 |
commit | ff783d8aebc90802079f843b27f2719173bd6b70 (patch) | |
tree | dbad5aef1d667b7070815f56e993ae1a2bb68a0b | |
parent | f9b9a3297dd8d935d0ed5f176451075e192aee49 (diff) |
Add post button
-rw-r--r-- | src/components/moments/MomentPostButton.tsx | 49 | ||||
-rw-r--r-- | src/components/moments/index.ts | 1 | ||||
-rw-r--r-- | src/screens/profile/CaptionScreen.tsx | 7 |
3 files changed, 56 insertions, 1 deletions
diff --git a/src/components/moments/MomentPostButton.tsx b/src/components/moments/MomentPostButton.tsx new file mode 100644 index 00000000..78fe209b --- /dev/null +++ b/src/components/moments/MomentPostButton.tsx @@ -0,0 +1,49 @@ +import React from 'react'; +import {StyleSheet} from 'react-native'; +import {Text} from 'react-native-animatable'; +import {TouchableOpacity} from 'react-native-gesture-handler'; +import {TAGG_LIGHT_BLUE} from '../../constants'; +import {normalize, SCREEN_WIDTH} from '../../utils'; + +interface MomentPostButtonProps { + enabled: boolean; + onPress: () => void; +} + +const MomentPostButton: React.FC<MomentPostButtonProps> = ({ + enabled, + onPress, +}) => { + return ( + <TouchableOpacity + style={[styles.button, enabled ? {} : styles.grey]} + onPress={onPress} + disabled={!enabled}> + <Text style={styles.text}>Post</Text> + </TouchableOpacity> + ); +}; + +const styles = StyleSheet.create({ + button: { + width: SCREEN_WIDTH * 0.8, + height: normalize(37), + backgroundColor: TAGG_LIGHT_BLUE, + justifyContent: 'center', + alignItems: 'center', + borderRadius: 6, + alignSelf: 'center', + }, + grey: { + backgroundColor: '#C4C4C4', + }, + text: { + color: 'white', + fontWeight: 'bold', + fontSize: normalize(15), + lineHeight: 18, + letterSpacing: 2, + }, +}); + +export default MomentPostButton; diff --git a/src/components/moments/index.ts b/src/components/moments/index.ts index cac2da2e..d2f5d150 100644 --- a/src/components/moments/index.ts +++ b/src/components/moments/index.ts @@ -3,3 +3,4 @@ export {default as CaptionScreenHeader} from './CaptionScreenHeader'; export {default as Moment} from './Moment'; export {default as TagFriendsFooter} from './TagFriendsFoooter'; export {default as MomentPost} from './MomentPost'; +export {default as MomentPostButton} from './MomentPostButton'; diff --git a/src/screens/profile/CaptionScreen.tsx b/src/screens/profile/CaptionScreen.tsx index aa866f56..86628d16 100644 --- a/src/screens/profile/CaptionScreen.tsx +++ b/src/screens/profile/CaptionScreen.tsx @@ -18,7 +18,11 @@ import {Button} from 'react-native-elements'; import Video from 'react-native-video'; import {useDispatch, useSelector} from 'react-redux'; import FrontArrow from '../../assets/icons/front-arrow.svg'; -import {MentionInputControlled, SearchBackground} from '../../components'; +import { + MentionInputControlled, + MomentPostButton, + SearchBackground, +} from '../../components'; import {CaptionScreenHeader} from '../../components/'; import TaggLoadingIndicator from '../../components/common/TaggLoadingIndicator'; import {TAGG_LIGHT_BLUE_2} from '../../constants'; @@ -314,6 +318,7 @@ const CaptionScreen: React.FC<CaptionScreenProps> = ({route, navigation}) => { }) } /> + <MomentPostButton enabled={true} onPress={() => null} /> </View> </KeyboardAvoidingView> </TouchableWithoutFeedback> |