i am new to react native and i am trying to make a chat app layout.
As you can see in screenshot that i have attached, i want text box to take as much space as the text in it. For example, if i send 'Hi', it should only be stretched as much space 'Hi' needs.
If i send a long text, then it should stretch and take as much space as that text is. Like it happens in almost all texting apps.
The text box code is:
<TouchableOpacity>
<View style={styles.containerSent}>
<View style={{flex: 3}}>
<Text style={styles.message}>{item.message}</Text>
</View>
<View style={{flex: 1}}>
<Image
source={require('../assets/images/check.png')}
style={styles.image}
/>
<Text style={{textAlign: 'right', color: 'white'}}>
{msToTime(item.timestamp)}
</Text>
</View>
</View>
</TouchableOpacity>
Stylesheet
containerSent: {
flex: 1,
maxWidth: '70%',
// minWidth: '30%',
marginTop: 20,
paddingTop: 20,
paddingHorizontal: 10,
paddingBottom: 10,
borderWidth: 1,
backgroundColor: '#6F2232',
borderRadius: 20,
alignSelf: 'flex-end',
flexDirection: 'row',
justifyContent: 'space-between',
// justifyContent: 'flex-end',
},
message: {
color: 'white',
fontSize: 15,
fontWeight: 'bold',
textAlign: 'left',
alignSelf: 'stretch',
},
image: {
width: 15,
height: 15,
marginLeft: 20,
marginBottom: 5,
alignSelf: 'flex-end',
},
How I have implemented this is that I removed flex: 3 and flex: 1 from both the elements so that they don't expand to take the max space, and I added flexShrink: 1 to the text, so that it always shrinks keeping the right element intact.
Snack link
Set View style to flex: 0 so it‘s just taken as Maus h space as necessary.
<TouchableOpacity>
<View style={styles.containerSent}>
<View style={{ flex: 0 }}>
<Text style={styles.message}>{'q.a'}</Text>
</View>
<View style={{ flex: 0, paddingLeft: 10 }}>
<Text style={styles.message}>{'eeeee.message'}</Text>
</View>
</View>
</TouchableOpacity>
Take a look at my sample
Related
I would like to add a band of grey in the midddle of my white background. Here is the issue : I can't write anything inside of it. Here is my code : container: { flex: 1, justifyContent: "center", marginTop: 12, flexDirection: "column", }, upperContainer: { flex: 1, backgroundColor: "#fff", }, lowerContainer: { flex: 1, top: 1400, backgroundColor: "#F7F7F7", }
<ScrollView style={{ flex: 1 }} contentContainerStyle={{ flexGrow: 1 }}>
<View style={styles.container}>
<View style={styles.upperContainer}>
...
<View style={styles.lowerContainer}>
...
I'm not sure what you're going for with the ScrollView, but here's one way to do it on a static background:
<View style={{ flex: 1, backgroundColor: '#fff', justifyContent: 'center' }}>
<View style={{ backgroundColor: '#bbb', width: '100%', paddingVertical: 12 }}>
<Text style={{ textAlign: 'center' }}>
Gray Stripe Text
</Text>
</View>
</View >
Keys are:
flex: 1 and justifyContent: 'center' in outer View
nesting elements so they are contained
You could probably also do the gray background without the inner View, by adding background color straight to the Text.
Today i tried to use following property - alignItems: 'baseline'
Whole code:
<View
style={{
flexDirection: "row",
justifyContent: "flex-start",
alignItems: "baseline",
top: "6%",
left: 12,
flex: 1,
}}
>
<Text style={{ color: "#c1c3c9", fontSize: 24 }}>question</Text>
<Text style={{ color: "#c1c3c9", fontSize: 26 }}>2</Text>
<Text style={{ color: "#51546e", fontSize: 24 }}>/16</Text>
</View>
and image from emulator
I want to put this on whole line.
Where is the problem?
I need to display text in vertical position. the text will be dynamic so it can be short or long. i've added the screenshot of what i want. can anybody share the code for this type of ui. thanks in advance.
Like this
see this, this is what i got
<View>
<View style={{}}>
<View
style={{ marginTop: 30, flexDirection: "row", justifyContent: "center" }}
>
<Text
style={{
textAlign: "center",
fontSize: 20,
alignSelf: "center",
transform: [{ rotate: "90deg" }],
color: "white",
fontWeight: "bold",
}}
>
Short
</Text>
</View>
</View>
<View style={{}}>
<View
style={{ marginTop: 30, flexDirection: "row", justifyContent: "center" }}
>
<Text
style={{
textAlign: "center",
fontSize: 20,
alignSelf: "center",
transform: [{ rotate: "90deg" }],
color: "white",
fontWeight: "bold",
}}
>
Long Text
</Text>
</View>
</View>
</View>;
You're going to be in trouble if you try to apply the transformations one by one in all <Text />. Instead try to apply the transformations in a parent <View /> which gives you more control of what is going on.
const App = () => {
const {width: screenWidth, height: screenHeight} = Dimensions.get('window');
const height = 80;
return (
<View
style={{
transform: [
{rotate: '-90deg'}, // negative degrees is important for this calculations and have the text face the content as your desired result picture shows
{translateX: -(screenHeight / 2)}, // rotation is being applied in the center so it's safe to move it half screen
{translateX: height / 2}, // correct the x translation with half of our component height so it stays on screen
{translateY: -screenWidth}, // rotation is being applied in the center so it's safe to move it full screen width
{translateY: height / 2}, // correct the y translation with half of our component height so it stays on screen
],
width: screenHeight, // swap screen width with screen height so the background covers the entirety of the screen
height, // fixed height is important to apply corrections on transform you could also use a ref and get this size on runtime
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center',
backgroundColor: 'green',
}}>
<Text
style={{
fontSize: 20,
color: 'white',
fontWeight: 'bold',
margin: 10,
}}>
Short
</Text>
<Text
style={{
fontSize: 20,
color: 'white',
fontWeight: 'bold',
margin: 10,
}}>
Long Text
</Text>
<Text
style={{
fontSize: 20,
color: 'white',
fontWeight: 'bold',
margin: 10,
}}>
Very Long Long Text
</Text>
</View>
);
};
You can check the result here.
I'm trying to imitate the image.
I'm having a problem with the button with the like in the middle I can not imitate it.
Since I read it seems that native react on android has a problem with overflow.
I thought you could use a:
marginTop: -25
but it does not seem to solve the problem.
Some advice?
Link expo: https://snack.expo.io/Hk1yUyzB7
Code:
import React, { Component } from 'react';
import { View, StyleSheet, Image, Text } from 'react-native';
//import ViewOverflow from 'react-native-view-overflow';
export default class App extends Component {
render() {
var account = (
<View>
<View
style={{
paddingTop: 20,
paddingLeft: 20,
flexDirection: 'row',
}}>
<Image
style={{ width: 50, height: 50, borderRadius: 25 }}
source={{
uri:
'http://www1.pictures.zimbio.com/bg/Number+Four+World+Premiere+h5-FoI0M8-gl.jpg',
}}
/>
<View
style={{
paddingLeft: 20,
}}>
<Text>Yulia James</Text>
<Text
style={{
color: '#ccc',
}}>
6 hrs · IIT London
</Text>
</View>
</View>
<Text
style={{
paddingTop: 20,
paddingLeft: 20,
paddingBottom: 20,
}}>
Making everyday worth it :)
</Text>
<View
style={{
paddingBottom: 20,
}}>
<Image
style={{
width: '100%',
height: 200,
}}
source={{
uri:
'http://www.wordzz.com/wp-content/uploads/2016/11/Night-Ratri.jpg',
}}
/>
</View>
</View>
);
var com = (
<View
style={{
backgroundColor: 'rgba(230,230,230,0.8)',
//height: 40,
alignItems: 'center',
//justifyContent: 'center',
padding: 5,
flex: 1,
}}>
<Text
style={{
color: '#ccc',
fontSize: 18,
}}>
Comment
</Text>
</View>
);
return (
<View
style={{
flex: 1,
backgroundColor: '#e7eff0',
}}>
<View
style={{
backgroundColor: 'rgba(255,255,255,0.8)',
marginTop: 50,
borderTopWidth: 1,
borderBottomWidth: 1,
borderColor: '#e7e7e7',
}}>
{account}
<View
style={{
backgroundColor: '#fff',
borderTopWidth: 1,
borderColor: '#ccc',
//alignItems: 'center',
//justifyContent: 'center',
}}>
<View style={styles.container2}>
{com}
<View
style={{
//backgroundColor: '#000',
borderRadius: 40,
height: 80,
width: 80,
alignItems: 'center',
justifyContent: 'center',
borderColor: '#ccc',
borderWidth: 1,
}}>
<Image
style={{
//resizeMode: 'cover',
height: 40,
width: 40,
}}
source={{
uri: 'http://i.imgur.com/k5jMsaH.gif',
}}
/>
</View>
{com}
</View>
</View>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
container2: {
flexDirection: 'row',
},
});
Suppose I want to position a button 30% of the way the down its parent element (i.e. the whole page) in React Native. How do I do this using Flexbox or some other method?
For example, adding justifyContent: 'center' to the parent element would work if I wanted the button to be 50% of the way down the page.
Here is my React layout / stylesheet:
<View style={styles.container}>
<LinearGradient colors={['#e80ca3', '#e500ff', '#950ce8']} style={styles.linearGradient}>
<View style={styles.scanContainer}>
<View style={styles.scanButton} />
</View>
</LinearGradient>
</View>
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
linearGradient: {
flex: 1,
alignSelf: 'stretch',
justifyContent: 'center', // What to put here to make `scanContainer` 30% instead of 50% of the way down?
},
scanContainer: {
alignSelf: 'center',
},
scanButton: {
width: 175,
height: 175,
borderRadius: 87.5,
backgroundColor: 'green',
},
});
Here's the solution using flex properties
linearGradient: {
flex: 1,
alignSelf: 'stretch', //... Remove justifyContent: 'center',
},
scanContainer: {
flex: 0.7,
justifyContent: 'flex-end', // 30 % from the bottom
alignSelf: 'center',
},
You can add an empty View with flex 0.7 above the button:
<View style={{ flex: 1 }}>
<View style={{ flex: 0.7 }} />
<Button title="button" />
</View>
You can use absolute positioning for the button container.
scanContainer: {
alignSelf: 'center',
position: 'absolute',
bottom: '30%',
left: 0
}
Using flex:
<View style={[styles.scanContainer,{flex:1}]}>
<View style={{flex:1}} />
<View style={styles.scanButton} />
<View style={{flex:2}} />
</View>
Using Dimension:
import {Dimensions} from 'react-native';
<View style={[styles.scanButton,{marginTop:Dimensions.get('window').height * 0.3}]} />