unname coder's blog

hi i am new in react native mi question is, how i can get this layout design in react native with styles i am trying to use contain:{ flexDirection: 'row', flexDirection: 'column', //or } <View style={contain}> <View>el1</View> <View>el2</View> <View>el3</View> <View>el4</View> <View>el5</View> </View> But doesn't work Thanks http://appweplan.com:8080/public/images/layout.png You'll need to nest your views and apply the styling of flex-direction: 'row' or 'column' to the appropriate view. const styles = { rowView: { flexDirection: 'row' }, columnView: { flexDirection: 'column' } } <View style={styles.rowView}> <View style={styles.columnView}> <Text>Column 1</Text> <Text>Column 1</Text> </View> <View style={styles.columnView}> <Te...

I want to style Picker in React-Native, if with iOS I handled through with styling with css, Android picker not styling with React-Native styles. I found how to create the Android native styles with xml files but I can't reach them from my React-Native components. This is my code for Android version of Picker. if (Platform.OS === 'android') { return ( <Picker style={styles.inputContainer} selectedValue={this.props.value} onValueChange={this.props.onValueChange} mode='dropdown'> {this.props.items.map((i, index) => ( <Picker.Item key={index} label={i.label} value={i.value} /> ))} </Picker> ); } Android styles <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar"> <item name="android:spinnerItemStyle">@style/SpinnerItem</item> <item name="android:spinnerDropDownItemStyle">@style/SpinnerDropDownItem</...

In React Native, borderRadius is working but the background color given to the button stays a square. What is going on here? JS <TouchableHighlight style={styles.submit} onPress={() => this.submitSuggestion(this.props)} underlayColor='#fff'> <Text style={[this.getFontSize(),styles.submitText]}>Submit</Text> </TouchableHighlight> Style ... submit:{ marginRight:40, marginLeft:40, marginTop:10, }, submitText:{ paddingTop:20, paddingBottom:20, color:'#fff', textAlign:'center', backgroundColor:'#68a0cf', borderRadius: 10, borderWidth: 1, borderColor: '#fff' }, ... Try moving the button styling to the TouchableHighlight itself: Styles: submit:{ marginRight:40, marginLeft:40, marginTop:10, paddingTop:20, paddingBottom:20, backgroundColor:'#68a0cf', borderRadius:10, borderWidth: 1, borderColor: '#f...