Touchables in react native - react-native

Question

I am trying to add some space in the middle of two touchable components wrapped in a view
How do i go about doing that, I will include my style sheet
return (
<>enter code here
<View style={styles.container}>
<View style={styles.scrollContainer}>
<ScrollView
horizontal
pagingEnabled
showsHorizontalScrollIndicator={false}
>
{images.map((image) => (
<Image key={image} style={styles.image} source={image} />
))}
</ScrollView>
</View>
<View style={styles.btn}>
`enter code here`<LinearGradient
colors={["#0A5640", "#0A5640"]}
style={{ alignItems: "center", borderRadius: 10 }}
>
<TouchableOpacity onPress={() => navigation.navigate("SignIn")}>
<Text style={styles.btnAuth}>Sign In</Text>
</TouchableOpacity>
</LinearGradient>
<LinearGradient
colors={["#FFC72A", "#FFC72A"]}
style={{ alignItems: "center", borderRadius: 10 }}
>
<TouchableOpacity
onPress={() => navigation.navigate("CreateAccount")}
>
<Text style={styles.btnAuth}>Sign Up</Text>
</TouchableOpacity>
</LinearGradient>
</View>
</View>
</>
);
};
const styles = StyleSheet.create({
container: {
backgroundColor: "#0A5640",
},
scrollContainer: {
height: "100%",
},
image: {
width,
height: "100%",
},
btnAuth: {
fontSize: 18,
fontWeight: "bold",
paddingHorizontal: 60,
paddingVertical: 10,
color: "#fff",
marginLeft: 10,
},
btn: {
color: "#fff",
marginTop: 70,
flexDirection: "row",
alignItems: "center",
justifyContent: "space-around",
alignContent: "space-between",
zIndex: 200,
paddingRight: 10,
paddingLeft: 10,
bottom: 3,
position: "absolute",
},
});

Answer 1

Did you mean the space between SignIn and SignUp button? You can use flex or width to define the touchableOpacity width. Is this something that you tried to achieve?
import * as React from 'react';
import {Text,View,StyleSheet,TouchableOpacity,}from 'react-native';
export default function App() { return (
<View style={styles.container}>
<View style={styles.btn}>
<TouchableOpacity style={styles.btnAuth}>
<Text style={{color:'#000', fontSize:18}}>Sign In</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.btnAuth}>
<Text style={{color:'#000', fontSize:18}}>Sign Up</Text>
</TouchableOpacity>
</View>
</View> ); }
const styles = StyleSheet.create({ container: { backgroundColor: '#0A5640', flex:1 }, btnAuth: {
padding: 20,
width : '45%',
alignItems:'center',
backgroundColor:'yellow' }, btn: {
color: '#fff',
width: '100%',
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'space-around',
bottom: 3,
position: 'absolute', }, });