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'
}
Related
I have a TouchableOpacity set up as shown below:
<View style={{flexDirection: 'row'}}>
<TouchableOpacity onPress={() => selectImage()} style={{backgroundColor: COLORS.lightGray3, width: SIZES.width, height: 200, borderTopRightRadius: 15, borderTopLeftRadius: 15,}}>
<TouchableOpacity onPress={() => setModal(!modal)} style={{backgroundColor: 'white', width: 20, height: 20, borderRadius: 15, alignSelf:'flex-end', right: 10, top: 10}}>
<Icon name='x' size={20} style={{color: 'red'}}/>
</TouchableOpacity>
{array.picture == null ?
<View style={{alignItems: 'center', flexDirection: 'column', top: 50}}>
<Text>No Image Selected. </Text>
</View>
:
<Image resizeMode='cover' source={{uri: array.picture}} />
}
</TouchableOpacity>
</View>
In this TouchableOpacity is a conditional to load an image uri from an array once the image has been selected via selectImage(); even if array.picture IS NOT equal to null, it will either display the same "No Image Selected" text, or a gray background.
ARRAY:
[{"name": "test", "picture": "file:///Users/user/Library/Developer/CoreSimulator/Devices/C10A4A25-D633-44E8-AE53-AD8DD9601A82/data/Containers/Data/Application/C68582F5-CA35-4DD6-9D15-36A254411CD9/tmp/3E9EBBE3-AC1A-4C61-927E-DD168BD037A5.jpg", "price": 12}]
PICTURE OF DISPLAY:
ALSO, this is all displayed within a modal.
Anyone sure as to why this is occurring? Thanks!
If it's an array then try your condition like this you can either map it or just take picture from first index
{array.length>0 ?
<Image resizeMode='cover' source={{uri: array[0]?.picture}} />
:
<View style={{alignItems: 'center', flexDirection: 'column', top: 50}}>
<Text>No Image Selected. </Text>
</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've been trying to make a simple app, and I want some comment section that I create with flatlist, but after I create some component below my flatlist it won't appear, but the height of it appears, it just the component itself won't appear, after I'm trying to comment my flatlist, the component below it showed up.
Can you give me solution for this problem? so stuck with it
<View
style={{
alignItems: 'center',
flex: 1,
}}>
<FlatList
data={Comment}
keyExtractor={Comment.id}
renderItem={renderItem}
removeClippedSubviews={true}
scrollEnabled={false}
/>
</View>
</View>
<View>
<Timeline data={data} />
</View>
</View>
<!-- end snippet -->
Try this way
<View style={{ flex: 1 }}>
<View
style={{
alignItems: "center",
flex: 1,
}}
>
<FlatList
data={Comment}
keyExtractor={Comment.id}
renderItem={renderItem}
removeClippedSubviews={true}
scrollEnabled={false}
/>
</View>
<View>
<Timeline data={data} />
</View>
</View>
Here, I am displaying "icon="check-decagram" type="MaterialCommunityIcons" in center, but its just coming in center and 20 padding from top. I have to display it middle of the mobile screen. I tried may be I am doing some wrong .Please correct me .
return(
<ImageBackground source={BG} style={styles.imgBG}>
<ScrollView>
<View>
<Header title={title} icon={icon} navigation={navigation} />
</View>
<View style={{ flexDirection: 'column', backgroundColor: '#ffff',}}>
<View style={{
flexDirection:'column', backgroundColor:'#fff',alignItems:'center',paddingTop:20,justifyContent: 'center'}}>
<IconXL icon="check-decagram" type="MaterialCommunityIcons" style={{ color: 'green' }}/>
</View>
<View style={{
flexDirection:'row', backgroundColor:'#ffff',padding:20,flexWrap:'wrap'}}>
<SmallText textColor="grey" text={`v${updateResponse.updateStatusList.currentAppVersion} `}/>
<SmallText textColor="grey" text={`${updateResponse.updateStatusList.desc}`}/>
</View>
</View>
</ScrollView>
</ImageBackground>
)}
// Thanks
try to add two more property height: '100%' and width: '100%' in superview of icon,
like,
<View style={{flexDirection:'column',height: '100%',width: '100%',backgroundColor:'#fff',alignItems:'center',paddingTop:2,justifyContent: 'center'}}>
<IconXL icon="check-decagram" type="MaterialCommunityIcons" style={{ color:'green' }}/>
</View>
Hope this works for you,
Good luck.
You can try something like.
<View style={{
flex: 1,
alignItems: 'center',
justifyContent: 'center',
backgroundColor: 'blue'
}}>
<Text style={{backgroundColor: 'red'}}>
Your Text
</Text>
I am trying to set an icon inside a text input.
I know, there is this answer.
But it is not working as expected since the icon is outside of the TextInput, I need it to be inside.
This is what I am obtaining so far:
This is my code:
<View style={styles.InputContainer}>
<Ionicons
style={styles.IconWithinInput}
name="ios-search"
size={24}
/>
<TextInput
style={styles.AddEditInputs}
onChangeText={text => this.setState({ text })}
value={this.state.text}
/>
</View>
And the styles:
AddEditInputs: {
flex: 1,
height: 40,
borderWidth: 1,
},
IconWithinInput: {
padding: 10,
},
InputContainer: {
flexDirection: 'row',
},
I made the input borders like a rectangle to show you better what I meant to say.
The last design will be like this:
And as you may see, the input border is at the bottom of the icon too.
What else do I need to achieve what I need?
You cannot directly put icon on the textInput. What you can do is wrap the icon and textInput with the view with flexDirection set to row and provide the left padding to the icon so that it seems to appear as in textInput. If you want to do so you can use something like this
<View
style={{
flex: 1,
justifyContent: 'center',
alignItems: 'center'
}}>
<View style={{ flexDirection: 'row' }}>
<View style={{justifyContent: "center", marginRight: 5 }}>
<Image
source={{
uri: 'https://facebook.github.io/react-native/docs/assets/favicon.png',
}}
style={{ width: 10, height: 10 }}
/>
</View>
<TextInput placeholder="Enter your name" />
</View>
</View>
But my suggestion is to use the Input component of react-native-elements as it has leftIcon as props. You can find more information at here
<View style={{flex: 1, flexDirection: 'row'}}>
<Image
source={{uri: 'https://facebook.github.io/react-native/docs/assets/favicon.png'}}
style={{borderWidth: 1,width: 40, height: 40}}
/>
<TextInput
onChangeText={(text) => this.setState({text})}
value={this.state.text}
style={{borderWidth: 1, height: 40, borderColor: 'grey'}}
/>
<View>
Wrap the component with flex and provide width for the icon. You can set the icon by having some wrapper around since it can not be included inside textbox.