Within my react-native app, I need to take a picture and save it to new - custom album. Album should not be able to be accessed through photos over menu, thus I need to make album private, so captured photos can only be accessed through the app itself. I searched over web and I guess it's possible with react-native-fs or react-native-fetch-blob, but it seems it works only on Android. But it is not exactly what I need. Can you help me please with any documentation, example, code or anything ?
Here is my current Camera component that I already created, where user can take photos, save it to camera roll and access to photos in case s/she wants.
import React, { Component } from 'react';
import {CardItem, Content, Container, Body, Left, Icon, Header, Right, Footer, FooterTab, Button } from 'native-base';
import {
Platform,
StyleSheet,
Dimensions,
Text,
ListView,
View,
Alert,
TouchableOpacity,
Image,
CameraRoll,
ScrollView
} from 'react-native';
import {Actions} from 'react-native-router-flux';
import { RNCamera } from 'react-native-camera';
const instructions = Platform.select({
ios: 'Press Cmd+R to reload,\n' +
'Cmd+D or shake for dev menu',
android: 'Double tap R on your keyboard to reload,\n' +
'Shake or press menu button for dev menu',
});
const {width, height} = Dimensions.get("window"),
vw = width / 100
vh = height / 100
export default class Camera extends Component {
constructor(props)
{ super(props)
this.state = {
buffer: false,
bufferImage: '',
dataSource: new ListView.DataSource({
rowHasChanged: (row1, row2) => true
}),
galleryON: false,
selectedImgTmstmp: '',
cameraType: 'RNCamera.Constants.Type.back',
flashMode: false,
cameraSelf: true
}
}
renderRow(img) {
clr = this.state.selectedImgTmstmp===img.node.timestamp?'blue':'grey';
return(
<CardItem button horizontal={false} onPress={()=>this.setState({selectedImgTmstmp: img.node.timestamp})}
style={{flexDirection: 'column',borderWidth: 3,borderRadius: 4,padding: 0, marginBottom: 5,
borderColor: clr,height: height/4, width: '48%'}}>
<Image
style={{
width: '100%',
height: '100%',
}}
source={{ uri: img.node.image.uri }}
/>
</CardItem>
);
}
render() {
if(this.state.galleryON){
return(
<Container>
<Content style={{backgroundColor: '#d8d8d8',height: '100%',width: width}}>
<ListView contentContainerStyle={{justifyContent: 'space-around',flexDirection: 'row', flexWrap: 'wrap'}}
dataSource={this.state.dataSource}
enableEmptySections={true}
renderRow={(rowData)=>this.renderRow(rowData)}>
</ListView>
</Content>
<View style={{flexDirection: 'row',width: width, height: 40, backgroundColor: '#ff5a00', alignItems: 'center', justifyContent: 'center'}}>
<Left style={{flex: 1, margin: 5}}>
<Text onPress={()=>this.setState({galleryON: false, selectedImgTmstmp: ''})} style={{fontWeight: 'bold', fontSize: 15}}>Cancel</Text>
</Left>
<Body style={{flex: 2}}>
<Text>Select Image</Text>
</Body>
<Right style={{flex: 1, margin: 5}}>
<Text onPress={()=>this.state.selectedImgTmstmp===''?null:Actions.pop()} style={{fontWeight: 'bold', fontSize: 15}}>Proceed</Text>
</Right>
</View>
</Container>
);
}
return (
this.state.buffer===false?
<Container style={styles.container}>
<Header style={{backgroundColor: '#000000',borderBottomWidth: 1, borderColor: '#FFF'}}>
<Left>
<Button transparent onPress={()=>this.setState({flashMode: !this.state.flashMode})}>
<Icon style={{color: '#FFF'}} name={this.state.flashMode?'ios-flash-outline':'ios-flash'}/>
</Button>
</Left>
<Right>
<Button transparent onPress={()=>this.setState({cameraSelf: !this.state.cameraSelf})}>
<Icon style={{color: '#FFF'}} name='ios-reverse-camera-outline'/>
</Button>
</Right>
</Header>
<RNCamera
ref={ref => {
this.camera = ref;
}}
style = {styles.preview}
type={this.state.cameraSelf?RNCamera.Constants.Type.front:RNCamera.Constants.Type.back}
flashMode={this.state.flashMode?RNCamera.Constants.FlashMode.on:RNCamera.Constants.FlashMode.off}
permissionDialogTitle={'Permission to use camera'}
permissionDialogMessage={'We need your permission to use your camera phone'}
/>
<View style={{flexDirection: 'row', justifyContent: 'space-between', height: '10%', alignItems: 'center',backgroundColor: '#000000'}}>
<TouchableOpacity style={{ height: 40, margin: 5}} onPress={()=>Actions.pop()}>
<Text style={{color: '#FFFF', fontSize: 25}}>Cancel</Text>
</TouchableOpacity>
<TouchableOpacity style={{ height: 40, margin: 5}} onPress={this.takePicture.bind(this)}>
<Icon style={{color: '#FFF', fontSize: 40}} name='ios-radio-button-on'/>
</TouchableOpacity>
<TouchableOpacity style={{ height: 40, margin: 5}} onPress={()=>this.getGallery()}>
<Text style={{color: '#FFFF', fontSize: 25}}>Photos</Text>
</TouchableOpacity>
</View>
</Container>
:
<Container style={{width: width, height: height, alignItems: 'center'}}>
<View style={{width: width, height: height, flexDirection: 'column'}}>
<Image source={{uri: this.state.bufferImage}} style={{width: '100%', height: '90%'}}/>
<View style={{flexDirection: 'row', justifyContent: 'space-between', height: '10%', alignItems: 'center',backgroundColor: '#000000'}}>
<TouchableOpacity style={{ height: 40, margin: 5}} onPress={()=>this.setState({bufferImage: '', buffer: false})}>
<Text style={{color: '#FFFF', fontSize: 25}}>Cancel</Text>
</TouchableOpacity>
<TouchableOpacity style={{ height: 40, margin: 5}} onPress={()=>this.savePictureToRoll(this.state.bufferImage)}>
<Text style={{color: '#FFFF', fontSize: 25}}>Done</Text>
</TouchableOpacity>
</View>
</View>
</Container>
);
}
getDataSource(posts) {
return this.state.dataSource.cloneWithRows(posts);
}
getGallery(){
CameraRoll.getPhotos({
first: 100,
assetType: 'Photos'
})
.then(photos => {
this.setState({dataSource: this.getDataSource(photos.edges), galleryON: true},()=>console.log(this.state.dataSource))
})
}
takePicture = async function() {
if (this.camera) {
const options = { quality: 0.5, base64: true };
const data = await this.camera.takePictureAsync(options)
console.log("DATA: ",data);
console.log(data.uri);
this.setState({buffer: true,bufferImage: data.uri})
}
};
savePictureToRoll(uri){
console.log("DATA.URI: ",this.state.bufferImage);
CameraRoll.saveToCameraRoll(uri, 'photo');
this.setState({bufferImage: '', buffer: false},()=>Alert.alert("IMAGE SAVED"), Actions.pop())
}
}
Related
I have a react-native application drawer. In the navigation pane i want to apply background color of orange. Colors are being stored as a constant named as themed and the orange color is named as primary. The navigation is not applying the color to its background. Also i want to rescale the main application screen whenever the navigation panel is opened. That is not working too. I am using react-navigation v6.
This is my app.js file.
import React from 'react';
import {createStackNavigator} from '#react-navigation/stack';
import {NavigationContainer} from '#react-navigation/native';
import CustomDrawer from './navigation/CustomDrawer';
const Stack = createStackNavigator();
const App = () => {
return (
<NavigationContainer>
<Stack.Navigator
screenOptions={{
headerShown: false,
}}
initialRouteName={'Home'}>
<Stack.Screen name="Home" component={CustomDrawer} />
</Stack.Navigator>
</NavigationContainer>
);
};
export default App;
This is my mainLayout.js file
import React from 'react';
import {View, Text} from 'react-native';
import Animated from 'react-native-reanimated';
const MainLayout = ({drawerAnimationStyle}) => {
return (
<Animated.View
style={{
flex: 1,
alignItems: 'center',
justifyContent: 'center',
backgroundColor: 'white',
...drawerAnimationStyle,
}}>
<Text>MainLayout</Text>
</Animated.View>
);
};
export default MainLayout;
This is how my customNavigation.js file looks like
/* eslint-disable react/self-closing-comp */
/* eslint-disable react-native/no-inline-styles */
import React, {useState} from 'react';
import {View, Text, Image, TouchableOpacity} from 'react-native';
import {
createDrawerNavigator,
DrawerContentScrollView,
} from '#react-navigation/drawer';
import {MainLayout} from '../screens';
import {COLORS, FONTS, SIZES, icons, constants, dummyData} from '../constants';
import Animated from 'react-native-reanimated';
const Drawer = createDrawerNavigator();
const CustomDrawerItem = ({label, icon}) => {
return (
<TouchableOpacity
style={{
flexDirection: 'row',
alignItems: 'center',
marginBottom: SIZES.base,
height: 40,
paddingLeft: SIZES.base,
borderRadius: SIZES.base,
//borderColor
}}
// onPress
>
<Image
source={icon}
style={{
height: 20,
width: 20,
tintColor: COLORS.black,
}}
/>
<Text
style={{
marginLeft: 15,
color: COLORS.black,
...FONTS.h3,
}}>
{label}
</Text>
</TouchableOpacity>
);
};
const CustomDrawerContent = ({navigation}) => {
return (
<DrawerContentScrollView
scrollEnabled={true}
contentContainerStyle={{flex: 1}}>
<View
style={{
flex: 1,
paddingHorizontal: SIZES.radius,
}}>
{/* Close */}
<View
style={{
alignItems: 'flex-start',
justifyContent: 'center',
}}>
<TouchableOpacity
style={{
alignItems: 'center',
justifyContent: 'center',
}}
onPress={() => navigation.closeDrawer()}>
<Image
source={icons.cross}
style={{
height: 35,
width: 35,
tintColor: COLORS.black,
}}
/>
</TouchableOpacity>
</View>
{/* Profile */}
<TouchableOpacity
style={{
flexDirection: 'row',
marginTop: SIZES.radius,
alignItems: 'center',
}}
onPress={() => console.log('Profile Button Clicked')}>
<Image
source={dummyData.myProfile?.profile_image}
style={{
height: 50,
width: 50,
borderRadius: SIZES.radius,
}}
/>
<View
style={{
marginLeft: SIZES.radius,
}}>
<Text style={{color: COLORS.black, ...FONTS.h3}}>
{dummyData.myProfile?.name}
</Text>
<Text style={{color: COLORS.black, ...FONTS.body4}}>
View your profile
</Text>
</View>
</TouchableOpacity>
{/* Drawer Items */}
<View
style={{
flex: 1,
marginTop: SIZES.padding,
}}>
<CustomDrawerItem label={constants.screens.home} icon={icons.home} />
<CustomDrawerItem
label={constants.screens.my_wallet}
icon={icons.wallet}
/>
<CustomDrawerItem
label={constants.screens.notification}
icon={icons.notification}
/>
<CustomDrawerItem
label={constants.screens.favourite}
icon={icons.favourite}
/>
{/* Line Divider */}
<View
style={{
height: 1,
marginVertical: SIZES.radius,
marginLeft: SIZES.radius,
backgroundColor: COLORS.lightGray1,
}}></View>
{/* Drawer Items */}
<CustomDrawerItem label="Track Your Items" icon={icons.location} />
<CustomDrawerItem label="Coupons" icon={icons.coupon} />
<CustomDrawerItem label="Settings" icon={icons.setting} />
<CustomDrawerItem label="Invite a Friend" icon={icons.profile} />
<CustomDrawerItem label="Settings" icon={icons.setting} />
<CustomDrawerItem label="Help Center" icon={icons.help} />
</View>
{/* Logout */}
<View
style={{
marginBottom: SIZES.padding,
}}>
<CustomDrawerItem label="Logout" icon={icons.logout} />
</View>
</View>
</DrawerContentScrollView>
);
};
const CustomDrawer = () => {
const [progress, setProgress] = useState(new Animated.Value(0));
const scale = Animated.interpolateNode(progress, {
inputRange: [0, 1],
outputRange: [1, 0.8],
});
const borderRadius = Animated.interpolateNode(progress, {
inputRange: [0, 1],
outputRange: [0, 26],
});
const animatedStyle = {borderRadius, transform: [{scale}]};
return (
<View
style={{
flex: 1,
backgroundColor: COLORS.primary,
}}>
<Drawer.Navigator
overLayColor="transparent"
drawerStyle={{
flex: 1,
width: '65%',
paddingRight: 20,
backgroundColor: 'transparent',
}}
sceneContainerStyle={{
backgroundColor: 'transparent',
}}
screenOptions={{
headerShown: false,
drawerType: 'front',
}}
initialRouteName="MainLayout"
drawerContent={props => {
setTimeout(() => {
setProgress(props.progress);
}, 0);
return <CustomDrawerContent navigation={props.navigation} />;
}}>
<Drawer.Screen name="MainLayout">
{props => (
<MainLayout {...props} drawerAnimationStyle={animatedStyle} />
)}
</Drawer.Screen>
</Drawer.Navigator>
</View>
);
};
export default CustomDrawer;
so I have this layout. I backgrounded in blue the scrollview so I could see how big it is in terms of height.
my goal is to put this button at the end of the page. when the keyboard lifts up, it overlaps the button so it will be under the keyboard.
This is the screen code:
<SafeAreaView style={styles.root}>
<KeyboardAvoidingView
style={{ flex: 1 }}
behavior='padding'
keyboardVerticalOffset={-200}>
<ScrollView style={{ backgroundColor: 'blue', flex: 1 }}>
<Header title='AVS¨ANDARE' goBack={() => props.navigation.goBack()} />
<BgImage path={require('../../../assets/images/phone-city.png')} />
<View style={styles.container}>
<Text style={styles.title}>Från</Text>
<TextInput
ref={inputRef}
placeholder='dit namn'
autoCorrect={false}
onSubmitEditing={() =>
props.navigation.navigate('Person Selected')
}
returnKeyType='next'
style={styles.textInput}
placeholderTextColor={placeholderTextColor}
/>
<Text style={styles.paragraph}>
Skriv in vem du är så mormor vet vem träningsprogrammet kommer
ifrån.
</Text>
</View>
<NavButton
style={styles.button}
title='Nästa'
onPress={() => props.navigation.navigate('Capture Image')}
/>
</ScrollView>
</KeyboardAvoidingView>
</SafeAreaView>
this is the screen styles:
const styles = StyleSheet.create({
root: {
flex: 1,
backgroundColor: colors.blue
},
container: {
marginHorizontal: 20
},
title: {
color: colors.white,
fontSize: wp('15%')
},
textInput: {
color: colors.white,
fontSize: wp('15%'),
lineHeight: 60,
opacity: 0.5
},
paragraph: {
color: colors.white,
fontSize: wp('6%')
},
button: {
marginHorizontal: 20,
marginBottom: hp('6%'),
alignSelf: 'flex-end'
}
});
these are the navButton code:
<View style={[styles.navButtonContainer, props.containerStyle]}>
<TouchableOpacity
style={[
styles.navButton,
props.style,
{ backgroundColor: dynamicBackgroundColor }
]}
onPress={props.onPress}>
<Text style={[styles.title, { color: dynamicColor }]}>
{props.title}
</Text>
{DynamicIcon}
</TouchableOpacity>
</View>
this are the navbutton styles:
const styles = StyleSheet.create({
navButtonContainer: {
marginTop: 'auto'
},
navButton: {
backgroundColor: colors.blue,
marginLeft: 'auto',
width: wp('45%'),
height: wp('13%'),
flexDirection: 'row',
justifyContent: 'space-between',
borderRadius: 500,
paddingHorizontal: wp('5%'),
alignItems: 'center'
},
title: {
color: colors.white,
fontSize: wp('6%')
}
});
so, well. Why marginTop: 'auto' doesn't work and how can I put the button underneath the keyboard at the very bottom of the screen?
regards.
I am using a FlatList in my code like this:
<View style={styles.listHolder}>
{data && (
<FlatList
data={data.me.friends.nodes}
horizontal={false}
scrollEnabled
renderItem={({ item }) => (
<FriendItem friend={item} originatorId={data.me.id}/>
)}
keyExtractor={(item) => item.id.toString()}
ListEmptyComponent={NoFriendsContainer}
/>
)}
{error && <ErrorContainer />}
</View>
listHolder: {
width: '100%',
alignItems: 'center',
},
Each of the FriendItem looks somewhat like this:
return (
<View style={styles.item}>
<TouchableOpacity
onPress={() =>
navigation.navigate('FriendDetails', {
firstName: friend.firstName,
rating: friend.rating,
numberOfFriends: friend.friendsOfFriends?.totalCount,
//onDeleteFriend: onDeleteFriend,
vehicles: friend.vehicles,
})
}>
<Thumbnail
style={styles.thumbnail}
source={{
uri:
'https://cdn4.iconfinder.com/data/icons/avatars-xmas-giveaway/128/afro_woman_female_person-512.png',
}} />
</TouchableOpacity>
<View style={styles.nameContainer}>
<Text style={styles.userName}>{userName}</Text>
</View>
<View style={styles.deleteButtonContainer}>
<Button
rounded
style={styles.deleteButton}
onPress={() => onDeleteFriend(originatorId, friend.id)}>
<Icon name="trash-o" size={moderateScale(20)} color="black" />
</Button>
</View>
</View>
);
};
export const styles = StyleSheet.create({
item: {
backgroundColor: 'white',
borderRadius: moderateScale(20),
padding: moderateScale(20),
marginVertical: moderateScale(8),
marginHorizontal: 16,
height: moderateScale(110),
width: moderateScale(360),
justifyContent: 'space-between',
flexDirection: 'row',
},
userName: {
paddingRight: 55,
paddingLeft: 10,
paddingTop: 20,
},
deleteButton: {
backgroundColor: '#31C283',
width: moderateScale(45),
justifyContent: 'center',
},
deleteButtonContainer: {
paddingTop: 12,
marginRight: 2,
},
thumbnail: {
height: 85,
width: 85,
marginLeft: 2,
paddingRight: 0,
position: 'relative',
},
nameContainer: {
flexDirection: 'row',
},
});
Now the problem is that the FlatList is rendered vertically but its scroll bar is shown horizontally (which shouldn't happen). Additionally, I can move it in any direction right now. This should also not happen. I must fix it as it is. How can I do so? I am not sure if this is a styling issue or something in the FlatList component.
an you add the alwaysBounceVertical in the elow flatlist,
<FlatList
data={data.me.friends.nodes}
horizontal={false}
alwaysBounceVertical={true}
scrollEnabled
renderItem={({ item }) => (
<FriendItem friend={item} originatorId={data.me.id}/>
)}
keyExtractor={(item) => item.id.toString()}
ListEmptyComponent={NoFriendsContainer}
/>
Hope it helps. feel free for doubts
I want to have the two images clickable next to each over, this is my view:
function MyView(props) {
return (
<View style={{ flex: 1, }}>
<View style={{
// width: 230,
flex: 1,
justifyContent: 'center',
alignItems: 'center',
}}>
<ExternalLink href="https://play.google.com/store/apps/details">
<Image
source={availableAtGooglePlayImage}
style={{
width: '100%',
height: 70,
flex: 1,
marginTop: 10,
resizeMode: 'contain',
}}
/>
</ExternalLink>
</View>
<View style={{
// width: 230,
flex: 1,
justifyContent: 'center',
alignItems: 'center',
}}>
<ExternalLink href="https://itunes.apple.com/fr/app">
<Image
resizeMode="stretch"
source={availableAtAppStoreImage}
style={{
width: '100%',
height: 70,
flex: 1,
marginTop: 10,
resizeMode: 'contain',
}}
/>
</ExternalLink>
</View>
);
}
As soon as I use flex: 1 on the parent view of ExternalLink, the image disappear.
I have not found a way to get those two images next to each over.
I have only find a way to have them on top of each over, and the whole width is clickable but I want only the image to be clickable.
How this is possible in react-native ?
Can you check this code please, this is a working example expo :
import * as React from 'react';
import { Text, View, StyleSheet ,Image,TouchableOpacity,Linking } from 'react-native';
export default class App extends React.Component {
render() {
return (
<View style={styles.container}>
<View>
<TouchableOpacity onPress={() =>Linking.openURL("https://play.google.com/store/apps/details")}>
<Image style={{height:50,width:50}} source={{uri:"https://source.unsplash.com/random"}} />
</TouchableOpacity>
</View>
<View>
<TouchableOpacity onPress={() =>Linking.openURL("https://itunes.apple.com/fr/app")}>
<Image style={{height:50,width:50}} source={{uri:"https://source.unsplash.com/random"}} />
</TouchableOpacity>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
flexDirection:'row',
justifyContent:'space-around',
alignItems:'center',
},
});
Feel free for doubts
What you are looking for is {flexDirection: 'row'} property in style.
Copy code to https://snack.expo.io/
import * as React from 'react';
import { Text, View, StyleSheet, TouchableOpacity, Image, Linking } from 'react-native';
export default class App extends React.Component {
render() {
return (
<>
<View style={{flex:1, flexDirection:'row'}}>
<TouchableOpacity
style={styles.imageButton}
onPress={() =>{Linking.openURL("https://play.google.com/store/apps/details")}}
>
<Image
resizeMode={'contain'}
style={styles.coverImage}
source={{uri: 'https://facebook.github.io/react/logo-og.png'}}
/>
</TouchableOpacity>
<TouchableOpacity
style={styles.imageButton}
onPress={() =>{Linking.openURL("https://itunes.apple.com/fr/app")}}
>
<Image
resizeMode={'contain'}
style={styles.coverImage}
source={{uri: 'https://facebook.github.io/react/logo-og.png'}}
/>
</TouchableOpacity>
</View>
</>
);
}
}
const styles = StyleSheet.create({
coverImage: {
flex: 1,
alignSelf: 'stretch',
width: undefined,
height: undefined
},
imageButton:{
flex:1,
height:70
}
});
I have a component that is navigated to from the drawer menu,the name of the component is Servicecategory, now I want to navigate to a another component from this Servicecategory, The name of this component is Home, this Home component conatains a view pager, I want to navigate to home component and change the view pager to a specific page on navigate from ServiceCategory i.e this.setpage(0), is this possible, this is my code below
SERVICECATEGORY
import { connect } from "react-redux";
import { trueBrowse,trueCart, trueHome, trueMessages, trueServices,falseBrowse,
falseCart, falseHome,falseMessages, falseServices} from "../actions/index";
const mapStateToProps = state => {
return { home: state.home, browse: state.browse,cart: state.cart, messages: state.messages };
};
const mapDispatchToProps = dispatch => {
return {
trueBrowse: browse => dispatch(trueBrowse(browse)),
trueServices: services => dispatch(trueServices(services)),
trueHome: home => dispatch(trueHome(home)),
trueMessages: messages => dispatch(trueMessages(messages)),
trueCart: cart => dispatch(trueCart(cart)),
falseServices: services => dispatch(falseServices(services)),
falseMessages: messages => dispatch(falseMessages(messages)),
falseHome: home => dispatch(falseHome(home)),
falseCart: cart => dispatch(falseCart(cart)),
falseBrowse: browse => dispatch(falseBrowse(browse))
};
};
class reduxServicesCategory extends Component {
static navigationOptions = {
header: null,
drawerLockMode: 'locked-closed'
};
stateChanger() {
this.props.trueHome("home");
this.props.falseMessages("messages");
this.props.falseBrowse("soo");
this.props.falseCart("cart");
this.props.trueServices("services");
//ON navigate to Land, I want to change the view of the view pager, that is currently in land
this.props.navigation.navigate('Land');
}
constructor(props) {
super(props);
this.state = {
search: false
};
}
showSearch(){
this.setState({search: true},);
};
render(){
return(
<View style={styles.container}>
<View style={{flexDirection: 'row',height: 80,backgroundColor: '#fcfcfc',
marginBottom: 15,
justifyContent: 'center',width: '100%',alignItems: 'center' }}>
<TouchableNativeFeedback onPress={() => this.props.navigation.goBack(null)}>
<MaterialCommunityIcons style={{position: 'absolute',left: 10,top: StatusBar.currentHeight
}} name="arrow-left" size={30} color="#535461"/>
</TouchableNativeFeedback>
{this.state.search?
<TextInput
autoFocus={true}
ref="search"
placeholder="Search..."
returnKeyType={'search'}
placeholderStyle={{fontSize: 20, fontFamily: 'mont-semi',}}
placeholderTextColor="#000"
underlineColorAndroid={'transparent'}
style={{
position: 'absolute',top: StatusBar.currentHeight-5,
backgroundColor: '#fcfcfc',width: '65%',alignSelf: 'center',
fontSize: 20, fontFamily: 'mont-medium', color: '#000',
}}/>:<Text style={{fontFamily: 'mont-semi',
fontSize: 20,
color: '#000',}}>
Service Category
</Text>}
{this.state.search?
<TouchableNativeFeedback onPress={() => this.setState({search: false})}>
<MaterialIcons style={{position: 'absolute',right: 10,
top: StatusBar.currentHeight
}} name="cancel" size={30} color="#535461"/>
</TouchableNativeFeedback>:
<TouchableNativeFeedback onPress={this.showSearch.bind(this)}>
<MaterialIcons style={{position: 'absolute',right: 10,
top: StatusBar.currentHeight
}} name="search" size={30} color="#535461"/>
</TouchableNativeFeedback>}
</View>
<ScrollView>
<View style={{flexDirection: 'row',marginBottom: 25,
justifyContent: 'space-evenly'}}>
<TouchableNativeFeedback
onPress={this.stateChanger.bind(this)}>
<View style={styles.cats}>
<View style={styles.icon}>
<Image resizeMode="contain" style={{alignSelf: 'center', flex: 1}}
source={require('../makeup_icon.png')}/>
</View>
<Text style={styles.iconDes}>
{'\n'}MAKEUP ARTIST
</Text>
</View>
</TouchableNativeFeedback>
<TouchableNativeFeedback
onPress={this.stateChanger.bind(this)}>
<View style={styles.cats}>
<View style={styles.icon}>
<Image resizeMode="contain" style={{alignSelf: 'center', flex: 1}}
source={require('../makeup_icon.png')}/>
</View>
<Text style={styles.iconDes}>
{'\n'}MAKEUP ARTIST
</Text>
</View>
</TouchableNativeFeedback>
</View>
LANDCOMPONENT(HOME)
<ViewPagerAndroid style={{flex: 1}} initialPage={0}
onPageSelected={this.onPageSelected.bind(this)}
ref={(viewPager) => {
this.viewPager = viewPager
}}>
<View style={{flex: 1}} key="1">
{this.props.services ?
<View style={{
width: '100%',
marginTop: 10,
}}>
<Services navigation={this.props.navigation}/>
</View>
<View style={{flex: 1}} key="2">
<Messages/>
</View>
<View style={{flex: 1}} key="3">
<Browse navigation={this.props.navigation}/>
</View>
APP.JS(Drawer)
const screens = createStackNavigator({
Home: {
screen: ServiceDetail,
},
Signup: {
screen: Signup
},
Login: {
screen: Login
},
Land: {
screen: Home,
},
Find: {
screen: Find
},
Shop: {
screen: Shop
},
SetCat: {
screen: ServicesCategory
},
ServiceProfile: {
screen: ServiceProfile
},
ServiceDetail: {
screen: On,
},
JobBid: {
screen: JobBid
}
});
const RootStack = DrawerNavigator(
{
drawer: {
screen: screens
}
},
{
drawerWidth: Width * (80 / 100),
contentComponent: (props) => (
<View style={{flex: 1, backgroundColor: '#fcfcfc'}}>
<LinearGradient colors={['#EE8F62', '#f2ac88']}
style={{width: '100%', height: 190}}>
<View style={{
flex: 1, flexDirection: 'row', alignItems: 'center',
paddingTop: 20, justifyContent: 'center', alignContent: 'center'
}}>
<View style={{
width: 150, height: 150,
borderRadius: 150 / 2,
}}>
<Image resizeMode="contain" style={{alignSelf: 'center', flex: 1}}
source={require('./profile.png')}/>
</View>
<View style={{flexDirection: 'column', marginBottom: 13}}>
<Text style={{fontFamily: 'mont-semi', color: '#fff', fontSize: 20}}>
Jane Doe</Text>
<Text style={{fontFamily: 'mont', color: '#fcfcfc', fontSize: 18, marginTop: 10}}>
Profile</Text>
</View>
</View>
</LinearGradient>
<View style={{flex: 1, backgroundColor: '#fcfcfc'}}>
<TouchableNativeFeedback onPress={() =>
props.navigation.navigate('Shop', {})}>
<View style={{
height: 60,
width: '100%',
backgroundColor: '#fcfcfc',
flexDirection: 'row',
paddingLeft: 20,
paddingRight: 10,
paddingTop: 10,
alignItems: 'center',
alignContent: 'center',
justifyContent: 'center'
}}>
<View style={{
flexDirection: 'row', height: 40,
width: '100%', backgroundColor: '#f2f2f2', borderRadius: 3,
alignItems: 'center', paddingLeft: 10
}}>
<View style={{height: 21, width: 23}}><Image
resizeMode="contain" style={{alignSelf: 'center', flex: 1}}
source={require('./cart.jpg')}/></View>
<Text style={{
marginLeft: 23, fontFamily: 'mont-medium', fontSize: 14
, color: '#F3B690'
}}>Shop by Category</Text>
</View>
</View>
</TouchableNativeFeedback>
<TouchableNativeFeedback onPress={() =>
props.navigation.navigate('SetCat', {})}>
<View style={{
height: 60, width: '100%', backgroundColor: '#fcfcfc',
flexDirection: 'row', paddingLeft: 20, paddingTop: 10
}}>
<View style={{height: 23, width: 23}}><Image
resizeMode="contain" style={{alignSelf: 'center', flex: 1}}
source={require('./recruitment.jpg')}/></View>
<Text style={{
marginLeft: 23, fontFamily: 'mont-medium', fontSize: 14
, color: '#615D5D'
}}>Sẹlẹ Services</Text>
</View>
</TouchableNativeFeedback>
<View style={{
height: 60, width: '100%', backgroundColor: '#fcfcfc',
flexDirection: 'row', paddingLeft: 20, paddingTop: 10
}}>
<View style={{height: 23, width: 23}}><Image
resizeMode="contain" style={{alignSelf: 'center', flex: 1}}
source={require('./payment-method.png')}/></View>
<Text style={{
marginLeft: 23, fontFamily: 'mont-medium', fontSize: 14
, color: '#615D5D'
}}>Sell on Sẹlẹ</Text>
</View>
<TouchableNativeFeedback onPress={() =>
props.navigation.navigate('Login', {})}>
<View style={{
height: 60, width: '100%', backgroundColor: '#fcfcfc',
flexDirection: 'row', paddingLeft: 20, paddingTop: 10
}}>
<View style={{height: 21, width: 23}}>
<Image resizeMode="contain" style={{alignSelf: 'center', flex: 1}}
source={require('./account.jpg')}/></View>
<Text style={{
marginLeft: 23, fontFamily: 'mont-medium', fontSize: 14
, color: '#615D5D'
}}>My Account</Text>
</View></TouchableNativeFeedback>
</View>
</View>
)
},
{
initialRouteName: 'Home',
}
, {}
);
I think you should use componentDidUpdate
Like this
componentDidUpdate(){
if(this.props.home && this.props.services){
this.viewPager.setPage(0);
}
}