Develop Reference

.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>```

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

Passing param properly to a function in React Native

I'm struggling to pass const navigation = useNavigation(); properly to my outer function.
Currently, I have this 'main' function:
export default function MyDrawer({ route }) {
const nav = useNavigation(); // Use hook here as u will now dont get any error. now pass it as param to above if needed
return (
<NavigationContainer independent={true}>
<Drawer.Navigator
initialRouteName="QR"
drawerContent={props => CustomDrawerContent(props, route)}
>
<Drawer.Screen
name="QR"
component={QR}
initialParams={{ user: route.params.user }}
/>
<Drawer.Screen name="Odabir" component={Odabir} />
</Drawer.Navigator>
</NavigationContainer>
);
}
which handles the drawer logic and routing. I used to declare const Drawer = createDrawerNavigator() in this function:
function CustomDrawerContent({ props, navigation }, route, ) {
// *** Don't use below hook here its wrong to use hooks outside main function if need pass to it as param from main function
// const navigation = useNavigation();
return (
<SafeAreaView style={{ flex: 1 }}>
<View
style={{
height: 150,
alignItems: "center",
justifyContent: "center",
marginTop: Platform.OS === "ios" ? 0 : StatusBar.currentHeight
}}
>
<Image
source={{uri:route.params.user.photoUrl}}
style={{ height: 110, width: 110, borderRadius: 60 }}
/>
</View>
<View style={{ height: 30, alignItems: "center" }}>
<Text style={styles.naslov}>
{route.params.user.name} {route.params.user.lastname}
</Text>
</View>
<View style={{ height: 30, alignItems: "center" }}>
<Text style={styles.naslov}>
{route.params.user.email}
</Text>
</View>
<View style={{ height: 30, alignItems: "center", marginBottom: 10 }}>
<Text style={styles.naslov}></Text>
</View>
<Divider />
<ScrollView style={{ marginLeft: 5 }}>
<TouchableOpacity
style={{ marginTop: 20, marginLeft: 20 }}
onPress={() => props.navigation.navigate("QR")}
>
<View style={{ padding: 10 }}>
<Ionicons name="ios-qr-scanner" size={20} styles={{}}>
<Text style={styles.naslov}> QR</Text>
</Ionicons>
</View>
</TouchableOpacity>
<TouchableOpacity
style={{ marginTop: 20, marginLeft: 20 }}
onPress={() => props.navigation.navigate("Odabir")}
>
<View style={{ padding: 10 }}>
<Ionicons name="ios-qr-scanner" size={20} styles={{}}>
<Text style={styles.naslov}> Odabir</Text>
</Ionicons>
</View>
</TouchableOpacity>
<TouchableOpacity
style={{ marginTop: 20, marginLeft: 20 }}
onPress={() => props.navigation.navigate("Odabir")}
>
<View style={{ padding: 10 }}>
<Ionicons name="ios-qr-scanner" size={20} styles={{}}>
<Text style={styles.naslov}> Odabir</Text>
</Ionicons>
</View>
</TouchableOpacity>
</ScrollView>
</SafeAreaView>
);
}
Which handles the onPress routing to different components. I've had to move the const nav = useNavigation(); because of how hooks work and the process of catching data from the Google API.
My question is how do I properly pass the param back to the MyDrawer function so the navigation works again? The error I currently get is TypeError: undefined is not an object(evaluating 'props.navigation')

update code:
export default function MyDrawer({ route }) {
const nav = useNavigation(); // Use hook here as u will now dont get any error. now pass it as param to above if needed
return (
<NavigationContainer independent={true}>
<Drawer.Navigator
initialRouteName="QR"
drawerContent={props => <CustomDrawerContent {...props} {...{route}} />}
>
<Drawer.Screen
name="QR"
component={QR}
initialParams={{ user: route.params.user }}
/>
<Drawer.Screen name="Odabir" component={Odabir} />
</Drawer.Navigator>
</NavigationContainer>
);
}
Drawer Content
const CustomDrawerContent = ({navigation, route}) => {
// *** Don't use below hook here its wrong to use hooks outside main function if need pass to it as param from main function
// const navigation = useNavigation();
return (
<SafeAreaView style={{ flex: 1 }}>
<View
style={{
height: 150,
alignItems: "center",
justifyContent: "center",
marginTop: Platform.OS === "ios" ? 0 : StatusBar.currentHeight
}}
>
<Image
source={{uri:route.params.user.photoUrl}}
style={{ height: 110, width: 110, borderRadius: 60 }}
/>
</View>
<View style={{ height: 30, alignItems: "center" }}>
<Text style={styles.naslov}>
{route.params.user.name} {route.params.user.lastname}
</Text>
</View>
<View style={{ height: 30, alignItems: "center" }}>
<Text style={styles.naslov}>
{route.params.user.email}
</Text>
</View>
<View style={{ height: 30, alignItems: "center", marginBottom: 10 }}>
<Text style={styles.naslov}></Text>
</View>
<Divider />
<ScrollView style={{ marginLeft: 5 }}>
<TouchableOpacity
style={{ marginTop: 20, marginLeft: 20 }}
onPress={() => props.navigation.navigate("QR")}
>
<View style={{ padding: 10 }}>
<Ionicons name="ios-qr-scanner" size={20} styles={{}}>
<Text style={styles.naslov}> QR</Text>
</Ionicons>
</View>
</TouchableOpacity>
<TouchableOpacity
style={{ marginTop: 20, marginLeft: 20 }}
onPress={() => props.navigation.navigate("Odabir")}
>
<View style={{ padding: 10 }}>
<Ionicons name="ios-qr-scanner" size={20} styles={{}}>
<Text style={styles.naslov}> Odabir</Text>
</Ionicons>
</View>
</TouchableOpacity>
<TouchableOpacity
style={{ marginTop: 20, marginLeft: 20 }}
onPress={() => props.navigation.navigate("Odabir")}
>
<View style={{ padding: 10 }}>
<Ionicons name="ios-qr-scanner" size={20} styles={{}}>
<Text style={styles.naslov}> Odabir</Text>
</Ionicons>
</View>
</TouchableOpacity>
</ScrollView>
</SafeAreaView>
);
}

is there way to put text "cancel" and "ok" below the avatar buttons ? i mean that the avatar and the text need to be pressable when click

is there a way to put the text "cancel" and "ok" below the avatar button? I mean that the avatar and the text need to be pressable when click.
I can't put the text below to every button and I don't understand what is my mistake.
this is what I get now
but I need the text below to every button and also must be also pressable same the image (it should be part of the button)
this is my example of code :
const OrderInformationScreen = props => {
return (
<View
style={{
backgroundColor: '#00BFFF',
alignItems: 'flex-start',
justifyContent: 'center',
marginTop: 30,
borderBottomWidth: 2,
borderColor: 'blue',
flexDirection: "row",
justifyContent: 'space-evenly'
}}
>
<Avatar
size='large'
containerStyle={{ marginTop: 30 }}
activeOpacity={0.2}
rounded
source={require('../assets/down.png')} style={{ height: 80, width: 80 }}
onPress={() => console.log("cancel!")}
/>
<View >
<Text style={{ fontSize: 30 }}>cancel</Text>
</View>
<Avatar
size='large'
activeOpacity={0.2}
rounded
source={require('../assets/up.png')} style={{ height: 80, width: 80 }}
onPress={() => console.log("Works!")}
/>
<View>
<Text style={{ fontSize: 30 }}>ok</Text>
</View>
</View>
);
};

I think the best option is wrapping the avatar and the text by TouchableOpacity.
<TouchableOpacity onPress={() => console.log("cancel!")}>
<Avatar
size='large'
containerStyle={{ marginTop: 30 }}
activeOpacity={0.2}
rounded
source={require('../assets/down.png')} style={{ height: 80, width: 80 }}
/>
<View >
<Text style={{ fontSize: 30 }}>cancel</Text>
</View>
</TouchableOpacity>
I recommend to write your own styles by using basic react native elements. Try to use least number of 3rd party plugins. Good luck.

It is like that because of the styles you have given to view. You have given a flex direction row which will place all your elements in a row. You have given four elements in your root view which has style flex-direction row so all four elements in that view (2 Avatar component and 2 text) will be placed side by side in a row.
if you want text below image i thin you should put avatar and text box in a view and give that a view a flex-direction column like:
<View style={{flexDirection: 'row', justifyContent: 'space-evenly'}}>
<TouchableOpacity onPress={() => console.log("cancel!")>
<View style={{flexDirection: 'column', justifyContent: 'space-evenly'}}>
<Avatar>
<View>
<Text />
</View>
<View>
</TouchableOpacity>
<TouchableOpacity onPress={() => console.log("works!")>
<View style={{flexDirection: 'column', justifyContent: 'space-evenly'}}>
<Avatar>
<View>
<Text />
</View>
<View>
</TouchableOpacity>
<View>
hope this helps in someway :)

The best option is Wrapping the avatar and text with TouchableOpacity. and Add some more Styles like below
<TouchableOpacity style={{
backgroundColor: '#00BFFF',
display : "flex",
alignItems: 'flex-start',
justifyContent: 'center',
marginTop: 30,
borderBottomWidth: 2,
borderColor: 'blue',
}} onPress={() => {}>
<Avatar
size='large'
containerStyle={{ marginTop: 30 }}
activeOpacity={0.2}
rounded
source={require('../assets/down.png')} style={{ height: 80, width: 80 }}
/>
<View >
<Text style={{ fontSize: 30 }}>cancel || ok</Text>
</View>
</TouchableOpacity>

How to place two buttons within the same row in react native?

Within a popup dialog I want to buttons to be placed on the same line but now I'm getting like this https://i.stack.imgur.com/sJ30p.png.Following is the style given.
<PopupDialog
ref={popupDialog => {
this.popupDialog = popupDialog;
}}
dialogStyle={{ backgroundColor: "#ddd", height: 200, width:320, border:10,padding:10}}
overlayBackgroundColor="#fff"
dismissOnTouchOutside={true}
>
<View style={styles.dialogContentView}>
<Text style={{fontSize:18}}>Are you sure you want to submit?</Text>
<View style={styles.button_1}>
<Button
title="Yes"
onPress={() => {
console.log('clicked')
}}
/>
</View>
<View style={styles.button_1}>
<Button
title="No"
onPress={() => {
console.log('clicked')
}}
/>
</View>
</View>
</PopupDialog>
.....
....
dialogContentView: {
flex: 1,
flexDirection: 'column',
justifyContent: 'space-between'
},
button_1:{
width: '40%',
height: 30,
}

Add View parent to both Button component with style flexDirection: 'row' after </Text>
<View style={{ flexDirection: 'row' }}>
<View style={styles.button_1}>
<Button
title="Yes"
onPress={() => {
console.log('clicked');
}}
/>
</View>
<View style={styles.button_1}>
<Button
title="No"
onPress={() => {
console.log('clicked');
}}
/>
</View>
</View>
You can try this snack

Try this for full width without any spaces or margin JUST COPY PASTE
<View style={{ flexDirection: "row" }}>
<View style={{ flex: 1 }}>
<TouchableOpacity style={{ alignSelf: 'stretch',backgroundColor: '#2980B9' }} onPress={() => { onSavePress }}>
<Text style={{ alignSelf: 'center',
color: '#ffffff',
fontSize: 16,
fontWeight: '600',
paddingTop: 10,
paddingBottom: 10 }}>Save</Text>
</TouchableOpacity>
</View>
<View style={{borderLeftWidth: 1,borderLeftColor: 'white'}}/>
<View style={{ flex: 1}}>
<TouchableOpacity style={{ alignSelf: 'stretch',backgroundColor: '#2980B9'}} onPress={() => { onCancelPress }}>
<Text style={{ alignSelf: 'center',
color: '#ffffff',
fontSize: 16,
fontWeight: '600',
paddingTop: 10,
paddingBottom: 10 }}>Cancel</Text>
</TouchableOpacity>
</View>
</View>

To do that, I usually create a view, set its flexDirection to 'row' and put the button components inside of it. So, your code would look like this:
<View style={{ flexDirection: 'row' }}>
<Button title='Button 1'/>
<Button title='Button 2'/>
</View>
I hope it helps.