react-native: how to make keyboard on top of the component?

react-native: how to make keyboard on top of the component? - javascript

I have a bottomSheet component and when the keyboard is open the view of the bottomSheet get round.
The component without opening keyboard:
but when keybored is opened:
component code:
<BottomSheet
visible={isOpen}
onBackButtonPress={() => {
setToUpdate(undefined)
setIsOpen(false);
}}
>
<View style={[buttomSheetStyles.bottomNavigationView, { height: "80%", backgroundColor: Colors.white500 }]}>
<View style={[buttomSheetStyles.buttomSheetContainer, { alignItems: 'center', justifyContent: 'space-around' }]}>
<Image source={require('../assets/return.png')} resizeMode='contain' style={{ position: 'absolute', top: -100 }} />
<View style={{ justifyContent: 'center', alignItems: 'center', paddingHorizontal: 30, marginTop: 80 }}>
<Text style={{ fontFamily: I18nManager.isRTL ? 'almarai-bold' : 'montserrat-bold', fontSize: 17, textAlign: 'center' }}>{t("returnsScreen:NewReturnHeader")}</Text>
</View>
<Formik
validationSchema={returnValidationSchema}
initialValues={(toUpdate === undefined) ?
{ packageQuantity: '', unitQuantity: '', cause: '', image: '' } :
{ packageQuantity: toUpdate.value.productQuantity.packageQuantity.toString(), unitQuantity: toUpdate.value.productQuantity.unitQuantity.toString(), cause: toUpdate.value.cause, image: toUpdate.value.image.fileContent }}
onSubmit={(values) => {
console.log(values.cause)
if (toUpdate === undefined)
onSubmit(values);
else
onSubmit(values, toUpdate.index);
setToUpdate(undefined)
}}
>
{({
handleChange,
handleBlur,
handleSubmit,
setValues,
setFieldValue,
touched,
values,
errors,
isValid,
dirty,
}) => (
<View style={{ flex: 1, }}>
<View
style={{
flex: 1,
}}
>
<View style={{ flexDirection: 'row', justifyContent: 'center', alignItems: 'center', flex: 1 }}>
<Text style={{ flex: 2.5, textAlign: 'left', paddingLeft: 10, color: Colors.primary500, fontFamily: I18nManager.isRTL ? 'almarai-regular' : 'montserrat-regular' }}>{t("common:products")}</Text>
<Text style={{ flex: 1, textAlign: 'center', color: Colors.primary500, fontFamily: I18nManager.isRTL ? 'almarai-regular' : 'montserrat-regular' }}>{t("common:package")}</Text>
<Text style={{ flex: 1, textAlign: 'center', color: Colors.primary500, fontFamily: I18nManager.isRTL ? 'almarai-regular' : 'montserrat-regular' }}>{t("common:units")}</Text>
</View>
<View style={{
flex: 3, justifyContent: "center", alignItems: "center", flexDirection: 'row'
}}>
<CachedImage
source={{
uri: `${env.apiUrl.concat(env.productImagePngById.replace(":productId", orderItem.product!.id)).concat("?thumbnail=true")}`, // (required) -- URI of the image to be cached
expiresIn: 43200, // 12 hours in seconds (optional), if not set -- will never expire and will be managed by the OS
}}
cacheKey={`${orderItem.product!.id}-thumbnail`} // (required) -- key to store image locally
placeholderContent={( // (optional) -- shows while the image is loading
<Image
source={{
uri: productDefaultImage
}}
resizeMode="contain"
style={{ width: 100, height: 70 }}
/>
)}
resizeMode="contain" // pass-through to <Image /> tag
style={{ width: 100, height: 70 }}
/>
<View style={{ flex: 5, justifyContent: 'center', alignItems: 'center' }}>
<View style={{ flex: 5, flexDirection: 'row', justifyContent: 'space-around', alignItems: 'center' }}>
<View style={{ flex: 1, justifyContent: 'center', marginStart: 7 }}>
<Text style={styles.nameStyleText}>{I18nManager.isRTL ? orderItem.product!.rtlName : orderItem.product!.name}</Text>
</View>
<View style={{ flex: 1.5, flexDirection: 'row', justifyContent: 'space-around', alignItems: 'center' }}>
<Input
style={{ alignItems: 'center', backgroundColor: Colors.white500 }}
value={values.packageQuantity.toString()}
onChangeText={handleChange('packageQuantity')}
status={
touched.packageQuantity
? !errors.packageQuantity
? "success"
: "danger"
: "warning"
}
keyboardType="numeric"
/>
<Input
style={{ alignItems: 'center', backgroundColor: Colors.white500 }}
value={values.unitQuantity.toString()}
onChangeText={handleChange('unitQuantity')}
status={
touched.unitQuantity
? !errors.unitQuantity
? "success"
: "danger"
: "warning"
}
keyboardType="numeric"
/>
</View>
</View>
</View>
</View>
</View>
<View style={{ flex: 0.5, borderColor: Colors.black900, borderWidth: 1 }}>
<Picker
prompt={t("common:selectReason")}
mode="dropdown"
selectedValue={values.cause}
onValueChange={(e) => {
console.log("e: ", e)
setFieldValue('cause', e)
}
}>
<Picker.Item enabled={false} label={t("common:selectReason")} value={``} />
<Picker.Item label={t("returnsScreen:DAMAGED")} value={ReturnProductEnum.DAMAGED} />
<Picker.Item label={t("returnsScreen:UNLOADED")} value={ReturnProductEnum.UNLOADED} />
<Picker.Item label={t("returnsScreen:EXPIRED")} value={ReturnProductEnum.EXPIRED} />
</Picker>
</View>
<View style={{ flex: 2 }}>
<CameraInput
imageCallback={handleChange("image")}
openCamera={isCameraOpen}
setOpenCamera={setIsCameraOpen}
status={errors.image}
image={values.image}
/>
</View>
<Button
style={{
flex: 0.5,
width: '100%',
borderRadius: 9,
height: 65,
justifyContent: "space-evenly",
}}
status='info'
disabled={!isValid || !dirty || loading}
onPress={() => handleSubmit()}
accessoryRight={loading ? <View style={{ justifyContent: 'center', alignItems: 'center' }}><Spinner size='small' status='info' /></View> : IconComponent(
(I18nManager.isRTL ? evaIcons.backArrow : evaIcons.frontArrow),
Colors.white500
)}
>
{(props) => (
<Text
{...props}
style={{
fontFamily: I18nManager.isRTL ? 'almarai-bold' : 'montserrat-bold',
color: Colors.white500,
fontSize: 17,
marginLeft: 35,
}}
>
{t("common:submit")}
</Text>
)}
</Button>
</View>
)}
</Formik>
</View>
</View>
</BottomSheet >
is there's any way I can make keyboard, on top of the bottomSheet?
or a way to make the bottomsheet scrollable...
or if there's any better way to atchive the same result ?

Related

.map() function displays my hidden animated view for each child in React Native. And I am using keys and id

I have a hidden animated view that displays when you click on the specific account name. Currently, when you click an account name, the animated hidden view displays for all the children in the .map() function. I tried adding the key and id to the animated view as well but that does not work either. Still shows the hidden animated view for all the children in the map.
<ScrollView style={{flex: 1}} showsVerticalScrollIndicator={true}>
{accounts.map(account => (
<View key={account.id} id={account.id}>
<View
style={{
width: '100%',
backgroundColor: colors.primary,
borderRadius: 10,
padding: 10,
marginBottom: 10,
marginTop: 10,
zIndex: 1,
}}>
<View
style={{
flex: 1,
flexDirection: 'row',
}}>
<Text
onPress={() => setHidden(!hidden)}
style={{
fontSize: 30,
textAlign: 'left',
flex: 1,
marginTop: 'auto',
marginBottom: 'auto',
}}>
{account.name}
</Text>
<View>
<Text
style={{
fontSize: 30,
textAlign: 'right',
flex: 1,
marginBottom: 10,
}}>
{account.amount}
</Text>
<View
style={{
flexDirection: 'row',
justifyContent: 'flex-end',
}}>
<DeleteAccount account={account.name} />
<Icon name="wrench" size={25} color="#000000" />
</View>
</View>
</View>
</View>
{hidden ? (
<Animated.View
key={account.id}
id={account.id}
style={[
styles.subView,
{transform: [{translateY: bounceValue}]},
]}>
<Text>{account.name}</Text>
</Animated.View>
) : null}
</View>
))}
</ScrollView>```

react native firebase async await parellel with promise.all

import fire from '../config/fire';
const db = fire.firestore();
class InitialDb extends Component {
constructor(props) {
super(props);
this.state = {
schools: '',
students: '',
};
}
async componentDidMount() {
const { size: schools } = await db.collection('schools').get();
const { size: students } = await db.collection('students').get();
this.setState({ schools, students});
}
render() {
return (
<SafeAreaView>
{/* <StatusBar translucent backgroundColor='#1b75ce' />
<HC title='Dashboard' /> */}
<BackButton />
<View style={{ paddingTop: 10, marginBottom: 20 }}>
<View style={{ flexDirection: 'row' }}>
<View style={styles.widthstyle}>
<TouchableOpacity>
<Card>
<CardItem>
<Body>
<View style={{ flexDirection: 'row' }}>
<Image
style={{ width: 30, height: 30 }}
source={require('../assets/schools.png')}
/>
<Text style={{ textAlign: 'center' }}>
Schools:{this.state.schools}
</Text>
</View>
</Body>
</CardItem>
</Card>
</TouchableOpacity>
</View>
<View style={styles.widthstyle}>
<TouchableOpacity>
<Card>
<CardItem>
<Body>
<View style={{ flexDirection: 'row' }}>
<Image
style={{ width: 30, height: 30 }}
source={require('../assets/asd.png')}
/>
<Text style={{ textAlign: 'center' }}>
Students:{this.state.students}
</Text>
</View>
</Body>
</CardItem>
</Card>
</TouchableOpacity>
</View>
</View>
<View
style={{ flexDirection: 'row' }}
// style={styles.basic1Style}
>
<View style={styles.widthstyle}>
<TouchableOpacity>
<Card>
<CardItem>
<Body>
<View style={{ flexDirection: 'row' }}>
<Image
style={{ width: 30, height: 30 }}
source={require('../assets/def.png')}
/>
<Text style={{ textAlign: 'center' }}>
Office:50
</Text>
</View>
</Body>
</CardItem>
</Card>
</TouchableOpacity>
</View>
<View style={styles.widthstyle}>
<TouchableOpacity>
<Card>
<CardItem>
<Body>
<View style={{ flexDirection: 'row' }}>
<Image
style={{ width: 30, height: 30 }}
source={require('../assets/abc.png')}
/>
<Text style={{ textAlign: 'center' }}>Attended:50</Text>
</View>
</Body>
</CardItem>
</Card>
</TouchableOpacity>
</View>
</View>
</View>
{/* <Text style={{ textAlign: "center" }}>
Swipe from left to right for menu
</Text> */}
<View style={{ marginBottom: 2 }}>
<Text style={{ textAlign: 'center', fontSize: 20, marginBottom: 5 }}>
Search
</Text>
</View>
<Form style={{ marginLeft: 20 }}>
<View style={{ flexDirection: 'row' }}>
<Item style={{ paddingLeft: 20, width: '40%' }}>
<Label style={{ textAlign: 'left' }}>Division</Label>
<Input />
</Item>
<Item style={{ paddingLeft: 20, width: '40%' }}>
<Label style={{ textAlign: 'left' }}>Area</Label>
<Input />
</Item>
</View>
<View style={{ flexDirection: 'row', paddingTop: 20 }}>
<Item style={{ paddingLeft: 20, width: '40%' }}>
<Label style={{ textAlign: 'left' }}>Gang</Label>
<Input />
</Item>
<Item
style={{
borderBottomColor: 'white',
}}
>
<Button info style={{ marginLeft: 25 }}>
<Text> Search </Text>
</Button>
</Item>
</View>
</Form>
{/*<View style={{ flex: 1, marginTop: 3, left: 0, right: 0, bottom: 0 }}>
<MapView
initialRegion={{
latitude: 12.93092,
longitude: 77.602156,
latitudeDelta: 0.0922,
longitudeDelta: 0.0421,
}}
style={styles.mapStyle}
></MapView>
</View>
*/}
</SafeAreaView>
);
}
}
const styles = StyleSheet.create({
basic1Style: {
// flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
flexDirection: 'row',
},
widthstyle: {
width: Dimensions.get('window').width / 2,
},
mapStyle: {
position: 'absolute',
top: 3,
left: 0,
right: 0,
bottom: 0,
},
});
export default InitialDb;
**This code above is working synchronously and also in series manner. I want this to be in async and await because this is freezing the UI. And also it should update the all 2 state objects after getting the size of all those 2 firestore collections using promise.all.
Here I have updated the code Please check it again **

PROBLEM
The problem here is basically your firebase is initializing on every hot-module reload. You only need to initialize once per App.
So basically, you could wrap your firebase initialization with try-catch and swallow the error.
try {
firebase.initializeApp({
/** config here **/
});
} catch(err) {
console.log(err);
}

trying to get a nested array work with react native flat list

so i got this object that i pass as data to my react native flatlist
<FlatList
extraData = {this.state}
data = {this.state.data_n1}>
renderItem = {({item, index}) => {
this.state.data_n2.forEach(aux => {
if(item.id == aux.id) {
return(<View><Text>Display first stuff</Text></View>);
} else {
return(<View><Text>Display second stuff</Text></View>);
}
}
}
/>
the whole idea is compare both objects, if the data_n2 contains the same id from the data_n1, the display the data from the data_n2, if not, just display from data_n1, problem is, i'm displaying this whenever i click on a calendar strip, so if i click on day june 1st, that day should display data_n2, if i click on day june 2nd, THAT one should display the data_n1.
does this work with flatlist or virtualizedlist (if i had to swap), or i need to render a flatlist for each data?
Edit: tested hao wu answer, but got this
Edit n2: i'll post the code, but keep in mind data_n1 is this.state.listaImputacionDia and this.state.listaImputacionDia is data_n2
this is the calendar strip code
<CalendarStrip
calendarHeaderStyle={{
fontSize: rfv(18),
fontWeight: "normal",
fontStyle: "normal",
letterSpacing: 0,
textAlign: "left",
color: "#707070",
paddingBottom: hp('4.5%')
}}
selectedDate={this.state.selectedDate}
onDateSelected={async (date) => {
await HoursReportHistoryBusiness.GetInstance().getListHoursReportRequest();
this.setState({ selectedDate: moment(date).format('YYYY-MM-DD') });
this.setViewHourHistory();
console.log(this.state.listaImputacionDia);
}}
minDate={moment().subtract(3, 'days')}
maxDate={moment().add(3,'days')}
startingDate={moment().subtract(3, 'days')}
useIsoWeekday={false}
style={{paddingTop: hp('1.5%'), paddingBottom: hp('2.7%'), backgroundColor: '#ffffff'}}
highlightDateNameStyle={{color: '#1062cc'}}
highlightDateNumberStyle={{color: '#1062cc'}}
disabledDateNumberStyle={{color: '#f21927'}}
disabledDateNameStyle={{color: '#f21927'}}
customDatesStyles={this.customDatesStyle}
dateNameStyle={{color: '#c4c4c4'}}
dateNumberStyle={{color: '#c4c4c4'}}
disabledDateOpacity={1}
/>
this is the flatlist
<FlatList
extraData={this.state.listaImputacionDia}
data={this.state.dataSource}//{DataManager.FavoriteList[moment(this.state.selectedDate).format('YYYY-MM-DD')]}
renderItem={({ item, index }) => {
if (this.state.listaImputacionDia.length != 0) {
const found = this.state.listaImputacionDia.filter(aux => item.id == aux.IdProyecto);
//this.state.listaImputacionDia.forEach(aux => {
if (found/*item.id == aux.IdProyecto*/) {
console.log('la wea' + found);
return (
<View style={{ marginTop: hp('2%') }}>
<TouchableOpacity style={} onPress={() => this.toggleExpanded()}>
<View style={{ flex: 1, flexDirection: 'row', justifyContent: 'space-between' }}>
<View style={{ flexDirection: 'column', justifyContent: 'center' }}>
<Text numberOfLines={2} ellipsizeMode="tail" style={}>{found.Title}</Text>
<Text style={}>{`ID ${found.Id} - ${found.Cliente}`}</Text>
{
!found.fav ?
<Text style={}>No favorito</Text>
: null
}
</View>
<View style={{ flexDirection: 'column', justifyContent: 'center' }}>
<View style={{ flexDirection: 'row', marginRight: wp('3.4%') }}>
<Text style={}>{`${found.HorasTrabajadas}h`}</Text>
<Image style={{ marginTop: hp('1%'), marginLeft: wp('3.7%') }} source={this.state.isCollapsed ? Images.expandible : Images.collapsible} />
</View>
</View>
</View>
</TouchableOpacity>
<Collapsible style={{
alignSelf: 'center',
width: wp('95.7%'),
backgroundColor: "#ffffff",
}} collapsed={this.state.isCollapsed}>
<View>
<View style={{ flexDirection: 'row' }}>
<Text style={}>Etapa</Text>
<Text style={}>Horas</Text>
</View>
<View style={{ flexDirection: 'row' }}>
<ModalDropdown
adjustFrame={style => {
style.top = (Platform.OS === 'ios' ? style.top : style.top - StatusBar.currentHeight);
return style;
}}
dropdownTextStyle={styles.dropdownTextStyle}
dropdownTextHighlightStyle={styles.dropdownTextHighlightStyle}
dropdownStyle={styles.dropdownStageStyle}
defaultValue={'Seleccionar'}
style={styles.dropStageStyle}
textStyle={{
padding: 0,
margin: 0,
fontSize: rfv(16),
paddingVertical: hp('1.2%'),
fontWeight: 'normal',
fontStyle: 'normal',
textAlign: 'left',
color: found.etapa != '' ? '#1a1a1a' : '#c4c4c4',
}}
//onSelect={(index, value) => this.setState({SeleccionClientes: value})}
//options={Object.keys(this.state.items)}
onSelect={(index, value) => this.setState({ SeleccionClientes: value })}
options={DataManager.ListEtapa}
/>
<View style={styles.InputContainerHours}>
<Text style={styles.InputTextHours}>{found.HorasTrabajadas}</Text>
</View>
<TouchableOpacity style={{ marginTop: hp('0.5%'), marginLeft: wp('5.5%') }} onPress={() => this.props.onSubstract}>
<Image source={Images.menos_hora} />
</TouchableOpacity>
<TouchableOpacity style={{ marginTop: hp('0.5%'), marginLeft: wp('2%') }} onPress={() => this.props.onAdd}>
<Image source={Images.mas_hora} />
</TouchableOpacity>
</View>
<Text style={}>Observaciones</Text>
<Input
autoCapitalize="none"
maxLength={100}
inputContainerStyle={styles.InputContainerComentarioOnBlur}
containerStyle={styles.InputComentario}
inputStyle={styles.InputTextHoursRInput}
placeholderTextColor={'#c4c4c4'}
placeholder="(Opcional)"
onChangeText={value => this.setState({})}
/>
<TouchableOpacity style={{ alignItems: 'flex-end', alignSelf: 'flex-end' }}>
<Text style={}>Agregar etapa</Text>
</TouchableOpacity>
</View>
</Collapsible>
</View>
)
}
else {
console.log('no encontro un favorito');
return (
<View style={{ marginTop: hp('2%') }}>
<TouchableOpacity style={{
alignSelf: 'center',
width: wp('95.7%'),
height: hp('10%'),
backgroundColor: "#ffffff",
}} onPress={() => this.toggleExpanded()}>
<View style={{ flex: 1, flexDirection: 'row', justifyContent: 'space-between' }}>
<View style={{ flexDirection: 'column', justifyContent: 'center' }}>
<Text numberOfLines={2} ellipsizeMode="tail" style={} >{found.title}</Text>
<Text style={}>{`ID ${found.id} - ${found.cliente}`}</Text>
{
!item.fav ?
<Text style={}>No favorito</Text>
: null
}
</View>
<View style={{ flexDirection: 'column', justifyContent: 'center' }}>
<View style={{ flexDirection: 'row', marginRight: wp('3.4%') }}>
<Text style={}>{`${20}h`}</Text>
<Image style={{ marginTop: hp('1%'), marginLeft: wp('3.7%') }} source={this.state.isCollapsed ? Images.expandible : Images.collapsible} />
</View>
</View>
</View>
</TouchableOpacity>
<Collapsible style={{
alignSelf: 'center',
width: wp('95.7%'),
backgroundColor: "#ffffff",
}} collapsed={this.state.isCollapsed}>
<View>
<View style={{ flexDirection: 'row' }}>
<Text style={}>Etapa</Text>
<Text style={}>Horas</Text>
</View>
<View style={{ flexDirection: 'row' }}>
<ModalDropdown
adjustFrame={style => {
style.top = (Platform.OS === 'ios' ? style.top : style.top - StatusBar.currentHeight);
return style;
}}
dropdownTextStyle={styles.dropdownTextStyle}
dropdownTextHighlightStyle={styles.dropdownTextHighlightStyle}
dropdownStyle={styles.dropdownStageStyle}
defaultValue={'Seleccionar'}
style={styles.dropStageStyle}
textStyle={}
//onSelect={(index, value) => this.setState({SeleccionClientes: value})}
//options={Object.keys(this.state.items)}
onSelect={(index, value) => this.setState({ SeleccionClientes: value })}
options={DataManager.ListEtapa}
/>
<View style={styles.InputContainerHours}>
<Text style={styles.InputTextHours}>{found.horas}</Text>
</View>
<TouchableOpacity style={{ marginTop: hp('0.5%'), marginLeft: wp('5.5%') }} onPress={() => this.props.onSubstract}>
<Image source={Images.menos_hora} />
</TouchableOpacity>
<TouchableOpacity style={{ marginTop: hp('0.5%'), marginLeft: wp('2%') }} onPress={() => this.props.onAdd}>
<Image source={Images.mas_hora} />
</TouchableOpacity>
</View>
<Text style={}>Observaciones</Text>
<Input
autoCapitalize="none"
maxLength={100}
inputContainerStyle={styles.InputContainerComentarioOnBlur}
containerStyle={styles.InputComentario}
inputStyle={styles.InputTextHoursRInput}
placeholderTextColor={'#c4c4c4'}
placeholder="(Opcional)"
onChangeText={value => this.setState({})}
/>
<TouchableOpacity style={{ alignItems: 'flex-end', alignSelf: 'flex-end' }}>
<Text style={}>Agregar etapa</Text>
</TouchableOpacity>
</View>
</Collapsible>
</View>
);
}
//})
}
else {
console.log('imputacion por dia esta vacio');
return (
<View style={{ marginTop: hp('2%') }}>
<TouchableOpacity style={{
alignSelf: 'center',
width: wp('95.7%'),
height: hp('10%'),
backgroundColor: "#ffffff",
}} onPress={() => this.toggleExpanded()}>
<View style={{ flex: 1, flexDirection: 'row', justifyContent: 'space-between' }}>
<View style={{ flexDirection: 'column', justifyContent: 'center' }}>
<Text numberOfLines={2} ellipsizeMode="tail" style={}>{item.title}</Text>
<Text style={}>{`ID ${item.id} - ${item.cliente}`}</Text>
{
!item.fav ?
<Text style={}>No favorito</Text>
: null
}
</View>
<View style={{ flexDirection: 'column', justifyContent: 'center' }}>
<View style={{ flexDirection: 'row', marginRight: wp('3.4%') }}>
<Text style={}>{`${10}h`}</Text>
<Image style={{ marginTop: hp('1%'), marginLeft: wp('3.7%') }} source={this.state.isCollapsed ? Images.expandible : Images.collapsible} />
</View>
</View>
</View>
</TouchableOpacity>
<Collapsible style={{
alignSelf: 'center',
width: wp('95.7%'),
backgroundColor: "#ffffff",
}} collapsed={this.state.isCollapsed}>
<View>
<View style={{ flexDirection: 'row' }}>
<Text style={}>Etapa</Text>
<Text style={}>Horas</Text>
</View>
<View style={{ flexDirection: 'row' }}>
<ModalDropdown
adjustFrame={style => {
style.top = (Platform.OS === 'ios' ? style.top : style.top - StatusBar.currentHeight);
return style;
}}
dropdownTextStyle={styles.dropdownTextStyle}
dropdownTextHighlightStyle={styles.dropdownTextHighlightStyle}
dropdownStyle={styles.dropdownStageStyle}
defaultValue={'Seleccionar'}
style={styles.dropStageStyle}
textStyle={}
//onSelect={(index, value) => this.setState({SeleccionClientes: value})}
//options={Object.keys(this.state.items)}
onSelect={(index, value) => this.setState({ SeleccionClientes: value })}
options={DataManager.ListEtapa}
/>
<View style={styles.InputContainerHours}>
<Text style={styles.InputTextHours}>{item.horas}</Text>
</View>
<TouchableOpacity style={{ marginTop: hp('0.5%'), marginLeft: wp('5.5%') }} onPress={() => this.props.onSubstract}>
<Image source={Images.menos_hora} />
</TouchableOpacity>
<TouchableOpacity style={{ marginTop: hp('0.5%'), marginLeft: wp('2%') }} onPress={() => this.props.onAdd}>
<Image source={Images.mas_hora} />
</TouchableOpacity>
</View>
<Text style={}>Observaciones</Text>
<Input
autoCapitalize="none"
maxLength={100}
inputContainerStyle={styles.InputContainerComentarioOnBlur}
containerStyle={styles.InputComentario}
inputStyle={styles.InputTextHoursRInput}
placeholderTextColor={'#c4c4c4'}
placeholder="(Opcional)"
onChangeText={value => this.setState({})}
/>
<TouchableOpacity style={{ alignItems: 'flex-end', alignSelf: 'flex-end' }}>
<Text style={}>Agregar etapa</Text>
</TouchableOpacity>
</View>
</Collapsible>
</View>
);
}
}}
/>

forEach only returns undefined, no matter what you return in the function.
You could find the element first, and then render it conditionally:
<FlatList
extraData={this.state.data_n2}
data={this.state.data_n1}>
renderItem = {({ item, index }) => {
const found = this.state.data_n2.find(aux => item.id == aux.id);
if (found) {
return (<View><Text>Display first stuff: {found.id}</Text></View>);
} else {
return (<View><Text>Display second stuff: {item.id}</Text></View>);
}
}}
/>
If there are possibly multiple matches:
<FlatList
extraData={this.state}
data={this.state.data_n1}>
renderItem = {({ item, index }) => {
const found = this.state.data_n2.filter(aux => item.id == aux.id);
if (found.length > 0) {
return (
<View>{
found.map(e => (<View><Text>Display first stuff: {e.id}</Text></View>))
}</View>
);
} else {
return (<View><Text>Display second stuff</Text></View>);
}
}}
/>

KeyboardAvoidingView with ScrollView are Not working in react-native or expo

I have to use both KeyboardAvoidingView and ScrollView at the same time.
But my problem is that it doesn't work at all.
Also I tried KeyboardAwareScrollView, but it didn't work either.
My screen should function like it.
this is my code:
const { windowHidth, windowHeight } = Dimensions.get("window");
...
render() {
if (this.state.loading === false) {
<ActivityIndicator
style={{ alignItems: "center", justifyContent: "center" }}
size="large"
/>;
}
return (
< KeyboardAwareScrollView
style={{ flex: 1 }}
>
<SafeAreaView
style={{
backgroundColor: "green",
height: windowHeight,
width: windowHidth,
flex: 1
}}
>
<View
style={{
height: "100%",
backgroundColor: "blue",
paddingTop: 40
}}
>
<View
style={{ paddingLeft: "7%", paddingRight: "7%", height: "94%" }}
>
<Image
source={require("../../image/testimage.png")}
resizeMode="stretch"
style={{ alignSelf: "center" }}
/>
<Text style={{ fontSize: 17, marginTop: "10%" }}>
비밀번호의 관리는 사용자의 책임이며, 분실하면 다시 찾을 수
있는 방법이 없습니다.
</Text>
<Text
style={{
paddingTop: "6%",
fontWeight: "bold",
paddingBottom: 10
}}
>
지갑 이름
</Text>
<TextInput
style={styles.walletscreen2textinput}
returnKeyType="next"
onSubmitEditing={() => this.password.focus()}
placeholder={"지갑 이름을 설정하세요."}
onChangeText={walletname => this.setState({ walletname })}
value={this.state.walletname}
textContentType="password"
underlineColorAndroid="#fff"
autoFocus={true}
/>
<Text
style={{
paddingTop: "6%",
fontWeight: "bold",
paddingBottom: 10
}}
>
비밀번호
</Text>
<TextInput
style={styles.walletscreen2textinput}
returnKeyType="next"
ref={input => (this.password = input)}
onSubmitEditing={() => this.passwordconfirm.focus()}
placeholder={
"비밀번호를 설정하세요(영문자,숫자포함 8자리 이상)."
}
onChangeText={password => this.setState({ password })}
value={this.state.password}
textContentType="password"
underlineColorAndroid="#fff"
secureTextEntry={true}
/>
<Text
style={{
paddingTop: "6%",
fontWeight: "bold",
paddingBottom: 10
}}
>
비밀번호 확인
</Text>
<TextInput
style={styles.walletscreen2textinput}
returnKeyType="go"
ref={input => (this.passwordconfirm = input)}
placeholder={"비밀번호를 한번 더 입력하세요."}
onChangeText={passwordconfirm =>
this.setState({ passwordconfirm })
}
value={this.state.passwordconfirm}
textContentType="nickname"
underlineColorAndroid="#fff"
secureTextEntry={true}
/>
</View>
<View style={{ height: "6%" }}>
<TouchableOpacity
disabled={this.state.disabled}
style={styles.walletscreen2button}
onPress={ () => { }}
>
<Text style={{ color: "#fff" }}>생성하기</Text>
</TouchableOpacity>
</View>
</View>
</View>
</SafeAreaView>
</ScrollView>
</KeyboardAvoidingView>
);
}
use KeyboardAwareScrollView code:
const { windowHidth, windowHeight } = Dimensions.get("window");
...
render() {
if (this.state.loading === false) {
<ActivityIndicator
style={{ alignItems: "center", justifyContent: "center" }}
size="large"
/>;
}
return (
<KeyboardAvoidingView
style={{ flex: 1 }}
behavior={Platform.OS === "ios" ? "padding" : null}
enabled
>
<ScrollView
contentContainerStyle={{ flex: 1 }}
keyboardShouldPersistTaps="always"
>
<SafeAreaView
style={{
backgroundColor: "green",
height: windowHeight,
width: windowHidth
}}
>
<View
style={{
height: "100%",
backgroundColor: "blue",
paddingTop: 40
}}
>
<View
style={{ paddingLeft: "7%", paddingRight: "7%", height: "94%" }}
>
<Image
source={require("../../image/testimage.png")}
resizeMode="stretch"
style={{ alignSelf: "center" }}
/>
<Text style={{ fontSize: 17, marginTop: "10%" }}>
비밀번호의 관리는 사용자의 책임이며, 분실하면 다시 찾을 수
있는 방법이 없습니다.
</Text>
<Text
style={{
paddingTop: "6%",
fontWeight: "bold",
paddingBottom: 10
}}
>
지갑 이름
</Text>
<TextInput
style={styles.walletscreen2textinput}
returnKeyType="next"
onSubmitEditing={() => this.password.focus()}
placeholder={"지갑 이름을 설정하세요."}
onChangeText={walletname => this.setState({ walletname })}
value={this.state.walletname}
textContentType="password"
underlineColorAndroid="#fff"
autoFocus={true}
/>
<Text
style={{
paddingTop: "6%",
fontWeight: "bold",
paddingBottom: 10
}}
>
비밀번호
</Text>
<TextInput
style={styles.walletscreen2textinput}
returnKeyType="next"
ref={input => (this.password = input)}
onSubmitEditing={() => this.passwordconfirm.focus()}
placeholder={
"비밀번호를 설정하세요(영문자,숫자포함 8자리 이상)."
}
onChangeText={password => this.setState({ password })}
value={this.state.password}
textContentType="password"
underlineColorAndroid="#fff"
secureTextEntry={true}
/>
<Text
style={{
paddingTop: "6%",
fontWeight: "bold",
paddingBottom: 10
}}
>
비밀번호 확인
</Text>
<TextInput
style={styles.walletscreen2textinput}
returnKeyType="go"
ref={input => (this.passwordconfirm = input)}
placeholder={"비밀번호를 한번 더 입력하세요."}
onChangeText={passwordconfirm =>
this.setState({ passwordconfirm })
}
value={this.state.passwordconfirm}
textContentType="nickname"
underlineColorAndroid="#fff"
secureTextEntry={true}
/>
</View>
<View style={{ height: "6%" }}>
<TouchableOpacity
disabled={this.state.disabled}
style={styles.walletscreen2button}
onPress={ () => { }}
>
<Text style={{ color: "#fff" }}>생성하기</Text>
</TouchableOpacity>
</View>
</View>
</View>
</SafeAreaView>
</KeyboardAwareScrollView>
);
}
Please help me to solve this problem.
Thank you in advance

The screens of Android and iOS were different, and in the case of Android screens, I gave up Scroll and focused on keyboardavoiding.
Android use: KeyboardAvoidingView
ios use : KeyboardAwareScrollView
usepage.js
import React, { Component } from "react";
import {
View,
TextInput,
Image,
StyleSheet,
Dimensions,
KeyboardAvoidingView,
Platform,
Text,
TouchableOpacity,
Alert,
ActivityIndicator
} from "react-native";
import { KeyboardAwareScrollView } from "react-native-keyboard-aware-scroll-view";
import { Ionicons } from "#expo/vector-icons";
import { NavigationActions } from "react-navigation";
class RegisterWalletScreen2 extends Component {
constructor(props) {
super(props);
this.state = {
walletname: "",
passwordconfirm: "",
password: "",
wallet: "",
disabled: false
};
}
static navigationOptions = ({ navigation }) => {
return {
headerLeft: (
<TouchableOpacity
style={{ paddingLeft: 15 }}
onPress={() => navigation.navigate("FirstAgreeStack")}
>
<Ionicons name={"ios-arrow-back"} size={35} color={"black"} />
</TouchableOpacity>
),
headerRight: null
};
};
render() {
if (Platform.OS === "ios") {
return this.state.wallet === "" ? (
<View
style={{ flex: 1, alignItems: "center", justifyContent: "center" }}
>
<ActivityIndicator size="large" />
</View>
) : (
<KeyboardAwareScrollView
style={{ backgroundColor: "#4c69a5" }}
resetScrollToCoords={{ x: 0, y: 0 }}
contentContainerStyle={styles.container}
scrollEnabled={false}
>
<View style={{ height: "92%" }}>
<View
style={{
flexDirection: "row",
paddingLeft: 30,
paddingTop: 22
}}
>
<Image
source={require("../../image/minigroup.png")}
style={{
resizeMode: "stretch"
}}
/>
<View
style={{ paddingLeft: Platform.OS === "ios" ? "29%" : "33%" }}
>
<Image
style={{
resizeMode: "stretch"
}}
source={require("../../image/oval_gray.png")}
/>
</View>
<View style={{ paddingLeft: 6 }}>
<Image
style={{
resizeMode: "stretch"
}}
source={require("../../image/oval_yellow.png")}
/>
</View>
<View style={{ paddingLeft: 6 }}>
<Image
style={{
resizeMode: "stretch"
}}
source={require("../../image/oval_gray.png")}
/>
</View>
<View style={{ paddingLeft: 6 }}>
<Image
style={{
resizeMode: "stretch"
}}
source={require("../../image/oval_gray.png")}
/>
</View>
</View>
<View
style={{
paddingLeft: "9%",
paddingBottom: "28%"
}}
>
<Text style={{ fontSize: 18, paddingTop: 19 }}>지갑 생성</Text>
<Text style={{ fontSize: 16, marginTop: 10 }}>
{`지갑명과 보안을 위해 비밀번호를 ${"\n"}설정해주세요. `}
</Text>
<Text
style={{
paddingTop: 22,
fontWeight: "bold",
paddingBottom: 8,
fontSize: 14
}}
>
지갑 이름
</Text>
<TextInput
style={styles.walletscreen2textinput}
returnKeyType="next"
onSubmitEditing={() => this.password.focus()}
placeholder={"지갑 이름을 입력해주세요."}
onChangeText={walletname => this.setState({ walletname })}
value={this.state.walletname}
textContentType="nickname"
// autoFocus={true}
underlineColorAndroid={"#f6f6ef"}
/>
<View style={{ flexDirection: "row" }}>
<Text
style={{
paddingTop: 30,
fontWeight: "bold",
paddingBottom: 8,
fontSize: 14
}}
>
비밀번호
</Text>
<Text
style={{
paddingTop: 30,
paddingBottom: 8,
fontSize: 12,
color: "#434343",
paddingLeft: 7
}}
>
영문/숫자 조합,8자리 이상
</Text>
</View>
<TextInput
style={styles.walletscreen2textinput}
returnKeyType="next"
ref={input => (this.password = input)}
onSubmitEditing={() => this.passwordconfirm.focus()}
placeholder={"비밀번호를 설정해주세요."}
onChangeText={password => this.setState({ password })}
value={this.state.password}
textContentType="password"
underlineColorAndroid={"#f6f6ef"}
secureTextEntry={true}
/>
<Text
style={{
paddingTop: 30,
fontWeight: "bold",
paddingBottom: 8,
fontSize: 14
}}
>
비밀번호 확인
</Text>
<TextInput
style={styles.walletscreen2textinput}
returnKeyType="go"
ref={input => (this.passwordconfirm = input)}
placeholder={"비밀번호를 한번 더 입력해주세요."}
onChangeText={passwordconfirm =>
this.setState({ passwordconfirm })
}
value={this.state.passwordconfirm}
textContentType="password"
underlineColorAndroid={"#f6f6ef"}
secureTextEntry={true}
/>
</View>
</View>
<View style={{ height: "8%" }}>
<TouchableOpacity
disabled={this.state.disabled}
style={styles.walletscreen2button}
onPress={async () => {
if (this.state.password.length < 8) {
Alert.alert("안내", "비밀번호 규칙에 맞지 않습니다.");
} else {
if (this.state.password !== this.state.passwordconfirm) {
Alert.alert("안내", "비밀번호가 일치하지 않습니다.");
}
if (this.state.password === this.state.passwordconfirm) {
Alert.alert("안내", "잠시만 기다려주세요.");
this.setState({
disabled: true
});
await this.createKeystore();
await this.download();
this.props.navigation.navigate("RegisterWallet3", {
walletname: this.state.walletname,
publicaddress: this.state.address,
v3: this.state.keystore
});
}
}
}}
>
<Text style={{ color: "#fff" }}>생성하기</Text>
</TouchableOpacity>
</View>
</KeyboardAwareScrollView>
);
} else {
return this.state.wallet === "" ? (
<View
style={{ flex: 1, alignItems: "center", justifyContent: "center" }}
>
<ActivityIndicator size="large" />
</View>
) : (
<KeyboardAvoidingView
behavior="position"
keyboardVerticalOffset={keyboardVerticalOffset}
style={styles.container}
>
<View style={{ height: "92%" }}>
<View
style={{
flexDirection: "row",
paddingLeft: 30,
paddingTop: 22
}}
>
<Image
source={require("../../image/minigroup.png")}
style={{
resizeMode: "stretch"
}}
/>
<View
style={{ paddingLeft: Platform.OS === "ios" ? "29%" : "33%" }}
>
<Image
style={{
resizeMode: "stretch"
}}
source={require("../../image/oval_gray.png")}
/>
</View>
<View style={{ paddingLeft: 6 }}>
<Image
style={{
resizeMode: "stretch"
}}
source={require("../../image/oval_yellow.png")}
/>
</View>
<View style={{ paddingLeft: 6 }}>
<Image
style={{
resizeMode: "stretch"
}}
source={require("../../image/oval_gray.png")}
/>
</View>
<View style={{ paddingLeft: 6 }}>
<Image
style={{
resizeMode: "stretch"
}}
source={require("../../image/oval_gray.png")}
/>
</View>
</View>
<View
style={{
paddingLeft: "9%"
}}
>
<Text style={{ fontSize: 18, paddingTop: 19 }}>지갑 생성</Text>
<Text style={{ fontSize: 16, marginTop: 10 }}>
{`지갑명과 보안을 위해 비밀번호를 ${"\n"}설정해주세요. `}
</Text>
<Text
style={{
paddingTop: 22,
fontWeight: "bold",
paddingBottom: 8,
fontSize: 14
}}
>
지갑 이름
</Text>
<TextInput
style={styles.walletscreen2textinput}
returnKeyType="next"
onSubmitEditing={() => this.password.focus()}
placeholder={"지갑 이름을 입력해주세요."}
onChangeText={walletname => this.setState({ walletname })}
value={this.state.walletname}
textContentType="nickname"
// autoFocus={true}
underlineColorAndroid={"#f6f6ef"}
/>
<View style={{ flexDirection: "row" }}>
<Text
style={{
paddingTop: 30,
fontWeight: "bold",
paddingBottom: 8,
fontSize: 14
}}
>
비밀번호
</Text>
<Text
style={{
paddingTop: 30,
paddingBottom: 8,
fontSize: 12,
color: "#434343",
paddingLeft: 7
}}
>
영문/숫자 조합,8자리 이상
</Text>
</View>
<TextInput
style={styles.walletscreen2textinput}
returnKeyType="next"
ref={input => (this.password = input)}
onSubmitEditing={() => this.passwordconfirm.focus()}
placeholder={"비밀번호를 설정해주세요."}
onChangeText={password => this.setState({ password })}
value={this.state.password}
textContentType="password"
underlineColorAndroid={"#f6f6ef"}
secureTextEntry={true}
/>
<Text
style={{
paddingTop: 30,
fontWeight: "bold",
paddingBottom: 8,
fontSize: 14
}}
>
비밀번호 확인
</Text>
<TextInput
style={styles.walletscreen2textinput}
returnKeyType="go"
ref={input => (this.passwordconfirm = input)}
placeholder={"비밀번호를 한번 더 입력해주세요."}
onChangeText={passwordconfirm =>
this.setState({ passwordconfirm })
}
value={this.state.passwordconfirm}
textContentType="password"
underlineColorAndroid={"#f6f6ef"}
secureTextEntry={true}
/>
</View>
</View>
<View style={{ height: "8%" }}>
<TouchableOpacity
disabled={this.state.disabled}
style={styles.walletscreen2button}
onPress={async () => {
if (this.state.password.length < 8) {
Alert.alert("안내", "비밀번호 규칙에 맞지 않습니다.");
} else {
if (this.state.password !== this.state.passwordconfirm) {
Alert.alert("안내", "비밀번호가 일치하지 않습니다.");
}
if (this.state.password === this.state.passwordconfirm) {
Alert.alert("안내", "잠시만 기다려주세요.");
this.setState({
disabled: true
});
await this.createKeystore();
await this.download();
this.props.navigation.navigate("RegisterWallet3", {
walletname: this.state.walletname,
publicaddress: this.state.address,
v3: this.state.keystore
});
}
}
}}
>
<Text style={{ color: "#fff" }}>생성하기</Text>
</TouchableOpacity>
</View>
</KeyboardAvoidingView>
);
}
}
}
const keyboardVerticalOffset = -180;
const styles = StyleSheet.create({
container: {
backgroundColor: "#ffffff",
flex: 1
},
walletscreen2textinput: {
width: "90%",
// height: "10%",
height: 40,
paddingHorizontal: 10,
backgroundColor: "#f6f6ef"
},
walletscreen2button: {
height: "100%",
backgroundColor: "#797771",
alignItems: "center",
justifyContent: "center",
width: "100%"
}
});
export default RegisterWalletScreen2;

Set page of viewpager in component

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);
}
}

Develop Reference

JavaScript is the programming language of the Web.

react-native: how to make keyboard on top of the component? - javascript

Related

.map() function displays my hidden animated view for each child in React Native. And I am using keys and id

react native firebase async await parellel with promise.all

trying to get a nested array work with react native flat list

KeyboardAvoidingView with ScrollView are Not working in react-native or expo

Set page of viewpager in component

Categories

Resources