I`m working on a chat app and I use gifted chat .
I want my bubble to contain both text and an image. That works fine but I'm not satisfied with the way it is split...
I want to have text on the left and the image on the right side.
Currently, my text is above the image:
This is the code for the content of the bubble:
<TouchableOpacity key={i} style={[styles.mapView, this.props.mapViewStyle]}>
<View>
<Text style = {styles.titleText}> {title}</Text>
<Image style={[styles.image, this.props.imageStyle]} source={{uri: 'https://facebook.github.io/react/img/logo_og.png'}}/>
</View>
</TouchableOpacity>
Any ideas on how I can achieve text on the left and the image on the right?
You need flexDirection on View: https://facebook.github.io/react-native/docs/flexbox.html#flex-direction
The default value is column so children are stacked vertically.
You need to use flex in View https://facebook.github.io/react-native/docs/flexbox.html You can also give desired alignment to text and image. By default direction is column so use flexDirection:'row'
Use the code below.
<TouchableOpacity key={i} style={[styles.mapView, this.props.mapViewStyle]}>
<View style={{flex:1,flexDirection:'row'}}>
<View style={{flex:0.5}}>
<Text style = {styles.titleText}> {title}</Text>
</View>
<View style={{flex:0.5}}>
<Image style={[styles.image, this.props.imageStyle]} source={{uri: 'https://facebook.github.io/react/img/logo_og.png'}}/>
</View>
</View>
</TouchableOpacity>
Related
I'm hoping to get help building an Image Grid in React Native.
I'm trying to create an image grid with mapped data from an array. The mapping part is working fine but the images are not being place the way I want.
This is what I'm looking for (images placed where red squares are):
This is my code so far:
<ScrollView style={{flex: 1, backgroundColor: 'yellow',
}} >
{data.map(image => (
<View style={styles.viewpic}>
<Image style={styles.image} source={{uri:image.url }}/>
</View>
))}
</ScrollView>
</SafeAreaView>
This is my CSS:
viewpic: {
flex: 1,
flexWrap:'wrap',
justifyContent: 'center',
flexDirection: 'row',
backgroundColor: 'blue',
},
image: {
justifyContent: 'center',
height: 115,
width: 115,
margin:6,
backgroundColor: 'red',
}
This is what I'm currently getting:
So far I tried every single CSS combo I could think but nothing has worked so far.
I also tried FLATLIST but to be honest I wasn't able to properly convert my current code to "fit" the requirements of Flatlists.
Thanks everyone for your help!
Cheers!
it's an HTML mistake.
In fact, you put the flex-wrap style for each element, that's why you have one element per line.
You have to put all the elements inside the flex-wrap div and it will works. I hope it will help you
<View style={styles.viewpic}>
{data.map(image => (
<Image style={styles.image} source={{uri:image.url }}/>
))}
</View>
I was able to find the answer!
I combined 2 tutorials + a few tricks and got it done!
First I built my image grid using "FlatList". I found a great tutorial with the step by step here(not my page, not affiliated):Youtube Tutorial
At the beginning I was getting the same result until I added "numColumns={ }"
Here's the code:
...
const numberOfCols = 3
...
return(
.
<View>
<FlatList
data={data}
keyExtractor={(item, index)=>{return item.date}}
numColumns={numberOfCols}
renderItem={({item, index})=>(
<View style={styles.viewpic}>
<Image style={styles.image} source={{uri:item.url}}/>
</View>
)}
/>
Then I used a bit of the strategy from this tutorial (not my page, not affiliated) :
Youtube Tutorial
I still need to adjust the css so it looks better but I'm happy with it so far.
Here is the final result:
Do you guys have any idea how to achieve this? The text is wrapped in ScrollView with maxHeight 400.
<ScrollView style={{maxHeight: 400}}>
<Text>{text}</Text>
</ScrollView>
This is what I want:
I hope this works for you :
<TouchableOpacity
style={"row"}
onPress={() => {
onClick(params)
}}>
<View>
<Text>1</Text>
<Text>2</Text>
<Text>4</Text>
</View>
</TouchableOpacity>
And here is live demo : https://snack.expo.io/#maifeeulasad/delicious-marshmallows
How can I set focus to the first (or any given) TouchableHighlight component inside the modal when it's opened?
I'm using D-pad/kayboard/TV Remote
Let's use the fragment of the react-native documentation modal example:
<View style={{marginTop: 22}}>
<Modal
animationType="slide"
transparent={false}
visible={this.state.modalVisible}
onRequestClose={() => {
Alert.alert('Modal has been closed.');
}}>
<View style={{marginTop: 22}}>
<View>
<TouchableHighlight>
<Text>Button 1</Text>
</TouchableHighlight>
<TouchableHighlight>
<Text>Button 2</Text>
</TouchableHighlight>
<TouchableHighlight
onPress={() => {
this.setModalVisible(!this.state.modalVisible);
}}>
<Text>Hide Modal</Text>
</TouchableHighlight>
</View>
</View>
</Modal>
<TouchableHighlight
onPress={() => {
this.setModalVisible(true);
}}>
<Text>Show Modal</Text>
</TouchableHighlight>
</View>
Navigation with D-pad works, but when the modal is opened, the first TouchableHighlight (button 1) is not focused, focus remains on the "Show Modal" button
Or, How can I set focus on the "Button 2" TouchableHighlight programatically?
TextInput for example has autoFocus, but TouchableHighlight no, if we are using only Touchable components inside a modal, I don;t know how to autoFocus them, or set implicitely it
Best Regards
Add hasTVPreferredFocus: true to the TouchableHighlight you want focused.
It is implemented on Android even though the documentation states that hasTVPreferredFocus is iOS-only.
Programmatically you can also force the focus by calling:
yourElementRef.setNativeProps({ hasTVPreferredFocus: true })
#mtkopone . is there any way to focus View component, i have a list which is inside View and i want to do some function calls when user focus on that View (onFocus,onBlur)
initialRef.current.setNativeProps({hasTVPreferredFocus: true});
I have already tried backgroundColor but for no success.
I have the following code and want to apply background color to the main parent View but dont want to specify any padding, how to acheive this?
<View style={{flex:1,alignItems:'center'}}>
<Text>
No new Transactions
</Text>
<View style={{backgroundColor:'#fc004f',paddingTop:44,paddingBottom:40,top:56,borderRadius:8,width:window.width-20,borderWidth:2,borderColor:'#dddddd'}}>
<Text style={{position:'absolute',fontSize:16,top:14,paddingLeft:16,color:'white',fontWeight:'bold'}}>Big Bazaar</Text>
<Text style={{position:'absolute',fontSize:14,top:48,paddingLeft:16,color:'white',fontWeight:'bold'}}>View Receipt</Text>
</View>
<View style={{flex:1,backgroundColor:'#401f80',padding:44,top:56,borderRadius:8,width:window.width-20,borderWidth:2,borderColor:'#dddddd',marginTop:10}}>
<Text style={{position:'absolute',fontSize:16,top:14,paddingLeft:16,color:'white',fontWeight:'bold'}}>Zomato Inc</Text>
<Text style={{position:'absolute',fontSize:14,top:48,paddingLeft:16,color:'white',fontWeight:'bold'}}>View Receipt</Text>
</View>
<View style={{flex:1,backgroundColor:'#fc004f',padding:44,top:56,borderRadius:8,width:window.width-20,borderWidth:2,borderColor:'#dddddd',marginTop:10}}>
<Text style={{position:'absolute',fontSize:16,top:14,paddingLeft:16,color:'white',fontWeight:'bold'}}>OLA Inc</Text>
<Text style={{position:'absolute',fontSize:14,top:48,paddingLeft:16,color:'white',fontWeight:'bold'}}>View Receipt</Text>
</View>
</View>
Remove flex:1 from the children views, and add backgroundColor to the parent view. Hope this helps!
I am completely new to react native and am creating an application where I need to display items in a ListView.My ListView consists of 3 columns namely, author, title, price i.e. each row in ListView displays these three columns.Currently I am able to display only one column both in header section and the content section as
_renderRow(rowData){
return (
<View>
<Text style={styles.row}> {rowData.title}</Text>
</View>
)
},
_renderHeader(){
return (
<View style={styles.sectionDivider}>
<Text style={styles.headingText}>
Title
</Text>
</View>
)
},
And my render function is as
render() {
return(
<View style={styles.container}>
<ActivityIndicatorIOS
animating={this.state.isLoading}
size="large">
</ActivityIndicatorIOS>
<ListView
dataSource={this.state.dataSource}
renderRow={this._renderRow}
renderHeader={this._renderHeader}
/>
</View>
)
}
So, I want to render 3 columns both in header as well as in content section.I googled it but could not find any relevant content.
Easily creating columns can be done with the flexbox style properties. For example:
_renderRow(rowData){
return(
<View styles={styles.flexRow}>
<Text>{rowData.title}</Text>
<Text>{rowData.author}</Text>
<Text>{rowData.price}</Text>
</View>
)
_renderHeader() {
return(
<View styles={styles.flexRow}>
<Text>Title</Text>
<Text>Author</Text>
<Text>Price</Text>
</View>
)
}
var styles = StyleSheet.create({
flexRow: {
flex: 1,
flexDirection: 'row' <---- This is the important style property
},
})
I created a snippet at https://rnplay.org/apps/p5hzcg if you want to play around with a working example.
you should try to modify your code with something like
_renderRow(rowData){
return (
<View>
<Text style={styles.column1}> {rowData.text1}</Text>
<View style={styles.sectionDivider}>
<Text style={styles.column2}> {rowData.text2}</Text>
<View style={styles.sectionDivider}>
<Text style={styles.column3}> {rowData.text3}</Text>
</View>
)
},
_renderHeader(){
return (
<View>
<Text style={styles.column1}>textColumm1</Text>
<View style={styles.sectionDivider}>
<Text style={styles.column2}>textColumm2</Text>
<View style={styles.sectionDivider}>
<Text style={styles.column3}>textColumm2</Text>
</View>
)
},
in this way each line will have 3 elements with same style, and if you fix the width of them it'll be exactly like columns.
Embedding text could alter the width value, so you have to decide what to do if the text is too long. So mostly deciding if to resize the text or going multiline.