I'm trying to align a text and an image that are wrapped in a text element in React Native.
This is what it currently looks like:
I'd like to have it aligned so it's even across.
This is the code I currently have:
<Text>
<Text
key={i}
onPress={() => this.updateCurrentFilter(i)}
style={{
paddingLeft: 10,
fontFamily: "Montserrat-Regular",
fontSize: 12,
}}
>{v.filter_name}</Text>
<Image
source={require('../assets/outline_toggle_off_black_18dp.png')}
style={{
width: 25,
height: 25,
color: 'black',
resizeMode: 'contain',
}}
/>
</Text>
Something like this should work. It's not clear why you're wrapping the outer level in a Text field instead of a View
<Text>
<View style={{flexDirection:'row', alignItems:'center'}}>
<Text style={{....}}}>foo</Text>
<Image ... />
</View>
</Text>
Related
I am a iOS Developer trying to learn React Native. Currently I am trying to figure out how to create a layout like this with FlexBox:
I am not sure how to use relative values for with in react native. When I am trying to implement it I am getting this:
As you can see, the view in the middle cutting the views on the left and right at there center. Any ideas? Here's my code:
<View style={{flexDirection: 'row', flex: 1}}>
<SafeAreaView>
<TouchableOpacity style={{left: 20, top: 24, height: 44, width: 44}}>
<Image
source={require('../../assets/images/backButton.png')}
style={{height: '100%', width: '100%'}}
/>
</TouchableOpacity>
</SafeAreaView>
<View style={{flex: 2, backgroundColor: '#FF2F2F'}}></View>
<SafeAreaView>
<Text
style={{
right: 20,
top: 24,
height: 44,
fontSize: 14,
}}>
1 / 6
</Text>
</SafeAreaView>
</View>
The issue here is that you have incorrectly ordered the classes(View, SafeView, etc) which are causing the layout to overlap and preventing you from getting the desired result.
Check my solution proposed below:
return (
<SafeAreaView style={{flex: 1}}>
<View style={{flexDirection: 'row', flex: 1, height: "100%"}}>
<TouchableOpacity style={{height: 44, width: 44, margin: 10}}>
<Image
source={require('../../assets/images/backButton.png')}
style={{height: '100%', width: '100%'}}
/>
</TouchableOpacity>
<View style={{flex: 1, backgroundColor: '#FF2F2F'}}></View>
<Text
style={{
padding: 14,
fontSize: 14,
}}>
1 / 6
</Text>
</View>
</SafeAreaView>
);
Running example for the solution on expo Snack
Feel free to explore and edit it!
I am using Webview component in React Native to render HTML content. The problem I am facing is that I cannot make the height variable so it can adapt to any content it has.
return (
<View style={{flex: 1}}>
<Header
containerStyle={{
backgroundColor: 'white',
borderBottomColor: '#dee0e2',
borderBottomWidth: 1
}}
centerComponent={{ text: 'Noticia', style: { color: 'black' } }}
leftComponent={
<TouchableHighlight onPress={() => navigate('homeScreen')}>
<Text style={{color: '#4289f4'}}>Atrás</Text>
</TouchableHighlight>
}
/>
<ScrollView style={{padding: 5}}>
<View style={{flexDirection: 'column'}}>
<Text style={{textAlign: 'center', fontSize: 17, fontWeight: 'bold'}}>{noticia[0].titulo}</Text>
<Image style={{width: '100%', height: 200, alignSelf: 'stretch', marginTop: 10}} source={{uri: noticia[0].imagen}} />
<View style={{height: 200, backgroundColor: 'red'}}>
<WebView
source={{html: noticia[0].articulo}}
scalesPageToFit={(Platform.OS === 'ios') ? false : true}
/>
</View>
</View>
</ScrollView>
</View>
);
If I don't give the <View>' that contents ' <Webview>' a height it does show me nothing. Tried already withflex: 1` but nothing changes.
In your parent view (root view directly under return()) style it as
height: '100%',
width: '100%'
It will adopt to any size screen.
I wanna add an "Edit" button with an icon in my <Image> component. following is my code for the <View> that contain the image.
<View style={{ flex: 1 }}>
<View
style={{
justifyContent: 'space-evenly',
alignItems: 'center',
flexDirection: 'row',
paddingVertical: 10
}}
>
<Image
source={{ uri: 'https://api.adorable.io/avatars/285/test#user.i.png' }}
style={{
marginLeft: 10, width: 100, height: 100, borderRadius: 50
}}
/>
</View>
</View>
it is much better if i can do this, without replacing <ListItem> with <Image>
You can try it like:
<View>
<Image
source={{ uri: 'https://api.adorable.io/avatars/285/test#user.i.png' }}
style={{
marginLeft: 10, width: 100, height: 100, borderRadius: 50
}}
/>
<Icon name={'edit'} containerStyle={styles.icon} onPress={console.log('I was clicked')}/>
</View>
Then the icon style like below: Note the absolute position attribute
icon: {
backgroundColor: '#ccc',
position: 'absolute',
right: 0,
bottom: 0
}
Tested with Icon from react-native-elements but I guess it should work with any other Icon.
Try to use ImageBackground to wrap your icon inside it and for icon purpose use react-native-vector-icon library.
<ImageBackground source={...} style={{width: '100%', height: '100%'}}>
<Icon
name="edit"
size={18}
onPress={this.edit}
>
Edit
</Icon>
</ImageBackground>
You can use react-native-vector-icons to add an icon within the view which contains image. You can also add an icon button component using that library which will look something like this
<Icon.Button
name="edit"
backgroundColor="#3b5998"
onPress={this.edit}
>
Edit
</Icon.Button>
I am trying to build a Search component with Textfield with both right view and left view(Images at both end). Text Input wraps itself to the length of the content, so component no covering entire parent width. How to stretch the component so that entire component occupies the full width of parent.
<View
style={{
flexDirection: "row",
height: 40,
alignSelf: "stretch",
backgroundColor: "red"
}}
>
<Image
source={require("./image_assets_rn/search_rn.png")}
style={{ alignSelf: "center" }}
/>
<TextInput
placeholder="Search Jet"
style={{ backgroundColor: "white", alignSelf: "stretch" }}
/>
<Image
source={require("./image_assets_rn/search_rn.png")}
style={{ alignSelf: "center" }}
/>
</View>;
Below is the output. I want to stretch the textfield along the main axis(width)
It can be achieved giving the TextInput flex:1, there is no need to use stretch.
<View style={styles.container}>
<View style={{flexDirection:'row', width: 300, height:40,backgroundColor:'lightgray'}}>
<Image
source={require('./image_assets_rn/search_rn.png')}
style={{ height: 30, width: 20,margin: 5}}
/>
<TextInput
placeholder="Search Jet"
style={{backgroundColor:'white', flex:1}}
/>
<Image
source={require('./image_assets_rn/search_rn.png')}
style={{ height: 30, width: 20, margin:5}}
/>
</View>
</View>
Check it on snack
I recommend you this tutorial to have a grasp on how flexbox works.
Hope it helps!
I just add component flexbox in each component that wrapped in component View. I think it will make every component follow the parent width.
<View style={{ flexDirection:'row',
height:40,
alignSelf:'stretch',
backgroundColor:'red' }}>
<Image source={ require('./image_assets_rn/search_rn.png')}
style={{ flex:1, alignSelf:'center' }}/>
<TextInput placeholder="Search Jet"
style={{ flex:1, backgroundColor:'white',
alignSelf:'stretch' }}/>
<Image source={ require('./image_assets_rn/search_rn.png')}
style={{ flex:1, alignSelf:'center' }}/>
</View>
If you want to learn more about Flexbox maybe you can read on the Official Web ReactNative.
I hope this can help you :))
Im using an image as basically a view and putting text inside of it, i tried to give opacity to the image but everytime i try the text gets opacity too I don't really know why it happens
<View style={{flex: 1}}>
<View style={{height: 180,}}>
<Image source={{uri : this.state.fullURLImage}} style={{flex: 1,width: window.width,justifyContent:'center',alignItems:'center',opacity: 0.7}}>
<Text style={{textAlign: 'center',fontWeight: 'bold',color:'white',fontSize:16,}}>{this.state.title}</Text>
<Text style={{color:'white',fontSize:14,}}>{'\n'}July {this._try(this.state.day)} | {this.state.time_start} - {this.state.time_end}</Text>
</Image>
</View>
<View style={{flexGrow: 1, backgroundColor: 'white',}}>
<Text style={{textAlign:'center',color:'#1B3D6C',fontWeight:'bold',margin:10,marginTop: 40}}>{this.state.author}</Text>
<Text style={{margin:10,textAlign: (Platform.OS === 'ios') ? 'justify' : 'left'}}>{this.state.text}</Text>
</View>
<Image
source={{uri : this.state.fullURLAuthor}}
style={{
position: 'absolute',
top: 180 - 64 / 2,
height: 64,
width: 64,
left: (Dimensions.get('window').width - 64) / 2,
borderRadius: 32,
}}
/>
</View>
You need to put Text outside of image tag and give them position
OR
Also give opacity using like {backgroundColor: 'rgba(0,0,0,0.5)'}}
You can just use <ImageBackground> instead of <Image> and apply opacity and color as mentioned below.
<ImageBackground
style={{flex: 1,height: 110,resizeMode: 'cover',}}
source={imageSoure}
borderRadius={5}
resizeMode='cover'
imageStyle={{ opacity: 0.3,backgroundColor: 'YourFavouredColor'}}
>
<Text>
{someText}
</Text>
<Text>
{someOtherText}
</Text>
</ImageBackground>
As #Nisarg already mentioned, it's nice to position the text from outside of the image. And meanwhile here is the code for changing opacity for the background:
<Image
style={{
resizeMode: "contain",
height: 100,
width: 200,
opacity:0.1
}}
source={require("#expo/snack-static/react-native-logo.png")}
/>
React draws components in order of appearence.
That said, I think your Image is being drawn on top of Text.
You have more than one way to achieve your layout, but following your code try this:
<View style={{flex: 1}}>
<Image
source={{uri : this.state.fullURLAuthor}}
style={{
position: 'absolute',
top: 180 - 64 / 2,
height: 64,
width: 64,
left: (Dimensions.get('window').width - 64) / 2,
borderRadius: 32,
}}
/>
<View style={{height: 180,}}>
<Image source={{uri : this.state.fullURLImage}} style={{flex: 1,width: window.width,justifyContent:'center',alignItems:'center',opacity: 0.7}}>
<Text style={{textAlign: 'center',fontWeight: 'bold',color:'white',fontSize:16,}}>{this.state.title}</Text>
<Text style={{color:'white',fontSize:14,}}>{'\n'}July {this._try(this.state.day)} | {this.state.time_start} - {this.state.time_end}</Text>
</Image>
</View>
<View style={{flexGrow: 1, backgroundColor: 'white',}}>
<Text style={{textAlign:'center',color:'#1B3D6C',fontWeight:'bold',margin:10,marginTop: 40}}>{this.state.author}</Text>
<Text style={{margin:10,textAlign: (Platform.OS === 'ios') ? 'justify' : 'left'}}>{this.state.text}</Text>
</View>
</View>