I'm a newbie in React Native and I'm working on a form to register an animal for adoption. Some fields are filled by choosing radio buttons and checkboxes, but in order to organize the form's layout I need to distance those elements of the form that are displayed in a row.
I tried to use:
justify-content: 'space around' - which didn't work because the label gets distanced from the button/box;
paddingLeft, paddingRight - kind of worked but as the buttons and boxes have labels with different numbers of characters, I can't get them aligned vertically like in the picture bellow without wasting a lot of time trying to set the correct padding.
Is there an easier way to do this?
Here is my code:
<Text>SEXO</Text>
<View style = {{flexDirection: 'row', alignSelf: "auto"}}>
<RadioButton checked={machoCheck} onPress={radioSexoHandlerMacho} />
<Text style={{marginRight: 20}}>Macho</Text>
<RadioButton checked={femeaCheck} onPress={radioSexoHandlerFemea}/>
<Text>Femea</Text>
</View>
<Text>PORTE</Text>
<View style = {{flexDirection: 'row'}}>
<RadioButton checked={pequenoCheck} onPress={radioPorteHandlerPequeno}/>
<Text style={{paddingRight: 20}}>Pequeno</Text>
<RadioButton checked={medioCheck} onPress={radioPorteHandlerMedio}/>
<Text style={{paddingRight: 20}}>Medio</Text>
<RadioButton checked={grandeCheck} onPress={radioPorteHandlerGrande}/>
<Text>Grande</Text>
</View>
<Text>IDADE</Text>
<View style = {{flexDirection: 'row'}}>
<RadioButton checked={filhoteCheck} onPress={radioIdadeHandlerFilhote}/>
<Text style={{paddingRight: 20}}>Filhote</Text>
<RadioButton checked={adultoCheck} onPress={radioIdadeHandlerAdulto}/>
<Text style={{paddingRight: 20}}>Adulto</Text>
<RadioButton checked={idosoCheck} onPress={radioIdadeHandlerIdoso}/>
<Text>Idoso</Text>
</View>
<Text>TEMPERAMENTO</Text>
<View style={{flexDirection: "row"}}>
<CheckBox style = {{height: 25}}
disabled={false}
value={brincalhao}
onValueChange={(newValue) => setBrincalhao(newValue)}
tintColors={{true: '#000000', false: '#2f3130'}}
/>
<Text>Brincalhão</Text>
<CheckBox style = {{height: 25}}
disabled={false}
value={timido}
onValueChange={(newValue) => setTimido(newValue)}
tintColors={{true: '#000000', false: '#2f3130'}}
/>
<Text>Tímido</Text>
<CheckBox style = {{height: 25}}
disabled={false}
value={calmo}
onValueChange={(newValue) => setCalmo(newValue)}
tintColors={{true: '#000000', false: '#2f3130'}}
/>
<Text>Calmo</Text>
</View>
you could do something like this,
like each item is wrapped in a fragment tag.
<View style = {{flexDirection: 'row', padding:5, justifyContent:"space-between"}}>
<>
<RadioButton checked={machoCheck} onPress={radioSexoHandlerMacho} />
<Text style={{marginRight: 20}}>Macho</Text>
</>
<>
<RadioButton checked={femeaCheck} onPress={radioSexoHandlerFemea}/
<Text>Femea</Text>
</>
</View>
Related
I have an weather app in react native that uses react-native-app-intro-slider that is basically a vertical FlatList. This is my App render
return (
<AppIntroSlider style = {{backgroundColor:'#4c669f'}}
renderItem = {_renderItem}
data = {dataToRender}
showDoneButton = {false}
showPrevButton = {false}
showNextButton = {false}/>
)
And the Slider items that i'm rendering look like this
_renderItem = ( {item} ) => {
return (
<View style={{flex:1}}>
<Text style={{fontSize:20, marginTop:20, color:'white',fontSize:25, alignSelf:'center'}}>{item.name}</Text>
<View style={{ flexDirection:'row', marginTop:15, alignItems:'center', justifyContent:'center'}}>
<Image source={{uri: 'http://openweathermap.org/img/wn/' + item.icon + '#2x.png'}} style={{width:90, height:90}}/>
<Text style={{color:'white', fontSize:60}}>{`${_.round(item.temp)}°C`}</Text>
</View>
<View>
<Text style={{alignSelf:'center', justifyContent:'center', color:'white', fontSize:20}}>{item.clouds}</Text>
<View style={{display:'flex', alignItems:'flex-start', marginLeft:40 }}>
<View style={{ marginTop:40, flexDirection:'row'}}>
<Icon name='wind' size={28}/>
<Text style={{marginLeft:5, fontSize:22, color:'white'}}>{item.wind} km/h</Text>
</View>
<View style={{ marginTop:10, flexDirection:'row'}}>
<Icon name='temperature-low' size={28} />
<Text style={{marginLeft:5, fontSize:22, color:'white'}}>{_.round(item.temp_min,1)} °C</Text>
</View>
<View style={{ marginTop:10, flexDirection:'row' }}>
<Icon name='temperature-high' size={28} />
<Text style={{marginLeft:5, fontSize:22, color:'white'}}>{_.round(item.temp_max,1)} °C</Text>
</View>
<View style={{ marginTop:10, flexDirection:'row' }}>
<Icon name='compress-alt' size={28} />
<Text style={{marginLeft:5, fontSize:22, color:'white'}}>{item.air_pressure} hPa</Text>
</View>
</View>
</View>
<View>
<FlatList
data={dataToRender16}
renderItem={renderFlatListItem}/>
</View>
</View>
);
}
And the issue is that the FlatList in the rendered item (in the second code snippet) is not scrolling down, I've tried changing some styles but none of that worked
First of your dataToRender16 must have some unique id ,and you must add keyExtractor to your FlatList.
checkout the following example:
<FlatList
keyExtractor={(item, index) => item.id}
data={dataItems}
renderItem={itemData => (
<ItemComponent
id={itemData.item.id}
onDelete={removeItemHandler}
title={itemData.item.value}
/>
)}
/>
Adding flex:1 to styles of the that FlatList is netsted is solved the issue
<View style={{flex:1, alignItems:'center', paddingTop:50}}>
<FlatList
data={dataToRender16 }
renderItem={renderFlatListItem}/>
</View>
I am trying to space my components however I am having issues. I would like my grid to take up 90% of the screen and the gear icon to take 10%
<View
style={{
paddingLeft: insets.left,
paddingRight: insets.right,
flex: 1,
flexDirection: 'row',
}}
onLayout={event => {
_handleWorkSpace(event);
}}>
<StatusBar hidden={true} />
<View style={{flex: 1}}>
<FlatGrid
itemDimension={96}
// maxDimension={128}
data={items}
style={styles.gridView}
// staticDimension={{width: 128, height: 128}}
fixed
spacing={10}
renderItem={({item}) => (
<View
onLayout={event => {
var {x, y, width, height} = event.nativeEvent.layout;
console.log(width, height);
}}
style={[styles.itemContainer, {backgroundColor: item.code}]}>
<Text style={styles.itemName}>{item.name}</Text>
<Text style={styles.itemCode}>{item.code}</Text>
</View>
)}
/>
</View>
<View style={{flex: 1}}>
<Icon name="settings" size={30} />
</View>
</View>
What I have
What I am hoping for
I was able to get the look but I had to change the grid flex value to 12. I know it's not the correct way so I am trying to figure how to do this
You put flex: 1 in both Views, this means that both will try to take up 50% of the space (1+1). If you want one to take 90% and the other one 10%, one will need flex: 9 and the other one flex: 1.
Just change the flex values:
<View style={{flex: 9}}>
<FlatGrid
...
/>
</View>
<View style={{flex: 1}}>
<Icon name="settings" size={30} />
</View>
To try to make it clearer: just imagine the sum of the flex values on the same level are 100%. Since you had 2 flex: 1, 1+1=2=100%, so 1=50%.
By making the change I suggested (flex: 9 and flex: 1) you can think of it like 9+1=10=100%, so 9=90% and 1=10%.
const {width} = Dimensions.get('window');
<View
style={{
paddingLeft: insets.left,
paddingRight: insets.right,
flex: 1,
flexDirection: 'row',
}}
onLayout={event => {
_handleWorkSpace(event);
}}>
<StatusBar hidden={true} />
<View style={{width : 0.9*width}}>
<FlatGrid
itemDimension={96}
// maxDimension={128}
data={items}
style={styles.gridView}
// staticDimension={{width: 128, height: 128}}
fixed
spacing={10}
renderItem={({item}) => (
<View
onLayout={event => {
var {x, y, width, height} = event.nativeEvent.layout;
console.log(width, height);
}}
style={[styles.itemContainer, {backgroundColor: item.code}]}>
<Text style={styles.itemName}>{item.name}</Text>
<Text style={styles.itemCode}>{item.code}</Text>
</View>
)}
/>
</View>
<View style={{width : 0.1*width}}>
<Icon name="settings" size={30} />
</View>
</View>
try this, don't forget to import Dimensions from react-native
use cosnt {width} = Dimensions.... out of return statement.
You can set your gear icon as an absolute element:
<View style={styles.grid}>
<Octicons name="gear" size={iconSize} color="black" style={styles.icon} />
<FlatGrid
itemDimension={130}
data={items}
style={styles.gridView}
spacing={10}
renderItem={({ item }) => (
<View style={[styles.itemContainer, { backgroundColor: item.code }]}>
<Text style={styles.itemName}>{item.name}</Text>
<Text style={styles.itemCode}>{item.code}</Text>
</View>
)}
/>
</View>
with the following styles:
grid: {
alignSelf: 'center',
width: width * 0.9,
},
icon: {
position: 'absolute',
right: -iconSize,
top: 0,
}
Here is a working snack: https://snack.expo.dev/#hristoeftimov/absolute-icon
I'm trying to make use of the buttons on my app, but apparently they don't work on a physical device, I cannot press them. In the simulator it is indeed possible to press them, but not sure why not in the physical device.
This is the following code I'm using:
<ScrollView refreshControl={
<RefreshControl
refreshing={this.state.refreshing}
onRefresh={this._onRefresh}
/>
}>
<View style={{ padding: 20, flexDirection: 'row' }}>
<TouchableOpacity onPress={() => console.log("the button works.")}>
<View style={styles.addHomework}>
<Text style={{ color: 'white' }}>Add Homework</Text>
</View>
</TouchableOpacity>
<View style={{ paddingLeft: 3 }}>
<TouchableOpacity onPress={() => this.removeSubject()}>
<View style={styles.removeSubject}>
<Text style={{ color: 'white' }}>Remove Subject</Text>
</View>
</TouchableOpacity>
</View>
</View>
I have a question. I want to put 2 webviews in one FlatList and between them I want to put view block. How I can do this? I tried to put flex 1, and it just showed data of the last webview.
Help me please
<FlatList
data={this.state.dataSource}
ItemSeparatorComponent = {this.FlatListItemSeparator}
renderItem={({item}) =>
<View style={{flex: 1}}>
<MyWebView style={{flex: 1}}
source={{html: `1` }}
/>
<View>
// here will be block
</View>
<MyWebView style={{flex: 1}}
source={{html: `2` }}
/>
</View>
}
keyExtractor={item => item.id}
/>
You need to use flex:1 for between component or give according to your requirement.
<View style={{flex:1}}>
<WebView style={{flex:1}}
source={{`any html code`}}
/>
<View style={{flex:1}}>
<Text>{your text}</Text>
</View>
<WebView
source={{`any html code`}}
/>
</View>
I'm trying to align contents to the left of image.But here what I'm getting is the text will take the left out space after the image.I'm expecting the float-align:left property just as in css to be here.So that I've used alignItems:flex-end.But not getting the output.Is there any possibility of doing this.What I've tried is as below
updated
<ScrollView>
{article.map(a =>
<TouchableOpacity onPress={() =>this.props.navigation.navigate('Article')}>
<CardSection>
<View style={{ flexDirection: 'row'}}>
<Image source={{uri:a.poster}} style={styles.thumbnail_style}/>
<Text style={styles.textStyle}>
{a.title}</Text>
</View>
</CardSection>
</TouchableOpacity>
)}
</ScrollView>
);
}
}
const styles= StyleSheet.create({
thumbnail_style :{
height: 50,
width:50,
},
textStyle:{
paddingTop:20,
fontSize:16,
paddingLeft:10,
marginRight:20
}
});
What I'm getting is as below
Could you explain why you are setting the Image inside your Text?
If you want the image on top of the text simply do:
<Image />
<Text></Text>
otherwise, if you want them placed from left to right you can wrap them in a view and use flexDirection
<View style = {{flexDirection: 'row'}}>
<Text></Text>
<Image />
</View>
<View style = {{flexDirection: 'row'}}>
<Image
style={{height: 100, width: 100}}
source = {{ uri: `https://x1.xingassets.com/assets/frontend_minified/img/users/nobody_m.original.jpg` }}/>
<Text style = {{padding:10, flex: 1, flexWrap: 'wrap'}}>my text</Text>
</View>
I am not sure why you are wrapping Image inside Text. Since you want Image and Text to appear side by side you need it to be siblings. You can have like:
<View>
<Image />
<Text />
</View>
Then you can apply following style to View
{
flexDirection: 'row',
alignItems: 'flex-start'
}