As a beginner in Javascript and React-native, I have been experimenting with the technology to assess its viability for potential use in my current workplace. However, I have encountered some challenges with the user interface.
To enhance my understanding of Javascript and how it interfaces with native Android modules, I created a test app with simple functions. Despite my familiarity with creating interfaces using RelativeLayout (now ConstraintLayout), I find myself frustrated with the HTML-like structure and CSS styling, which I admit is not my strong suit.
My goal is to design buttons that occupy equal space on the screen while maintaining consistent height without explicitly setting width or height properties. I believe that each device's screen size and resolution should dictate the component sizes.
After researching, I came across a property called flex, which supposedly functions similarly to Android's LinearLayout weight. However, when I implemented it on the buttons, they vanished:
To resolve this issue, below is the "HTML" code and styles used:
render() {
return (
<View style={styles.container}>
<View style={styles.containerText}>
<ScrollView
style={styles.scrollTextStyle}
contentContainerStyle={{ flexGrow: 1 }}
>
<Text style={styles.textStyle}>{this.state.textField}</Text>
</ScrollView>
<TextInput
multiline={true}
style={styles.inputStyle}
onChangeText={inputField =>
this.setState({
inputField
})}
value={this.state.inputField}
/>
</View>
<View style={styles.containerButton}>
//Buttons rendered here...
</View>
</View>
);
}
const styles = StyleSheet.create({
//Styles defined here...
});
I would greatly appreciate recommendations for tutorials or resources focusing on user interfaces in React-native, as existing materials tend to cover properties without providing comprehensive examples.