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.
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.
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
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?
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}]} />
I have this header written in CSS and HTML, I'm trying to make it in react native, but seems like position: 'absolute' removes my icon from the scene.
So, In my react-native app I have the following markup:
<View
style={header}>
<TouchableWithoutFeedback
onPress={this.props.callback}>
<View>
<Image
style={headerIcon}
source={require('./img/back.png')} />
</View>
</TouchableWithoutFeedback>
<Text style={headerTitle}>{this.props.title.toUpperCase()}</Text>
</View>
And the following stylesheet
const styles = StyleSheet.create({
header: {
height: 55,
alignItems: 'center',
justifyContent: 'center',
backgroundColor: colors.white,
flexDirection: 'row'
},
headerTitle: {
color: colors.black,
fontFamily: 'Dosis',
fontSize: 15
},
headerIcon: {
width: 22,
height: 16
}
})
Can someone explain me how to make the style for the react-native header to look like http://jsbin.com/bireqabujo/2/edit?html,css,output ?
Try This
<View style={styles.header}>
<TouchableWithoutFeedback
onPress={this.props.callback}>
<View>
<Image
style={styles.headerIcon}
source={require('./img/back.png')} />
</View>
</TouchableWithoutFeedback>
<View style={styles.headerTitleWrapper}><Text style={styles.headerTitle}>MY TITLE</Text></View>
</View>
And change your style to this
const styles = StyleSheet.create({
header: {
height: 55,
alignItems: 'center',
backgroundColor: "#fff",
flexDirection: 'row'
},
headerTitleWrapper: {flex: 1,
justifyContent: 'center',
alignItems: 'center'
},
headerTitle: {
color: 'black',
fontFamily: 'Dosis',
fontSize: 15
},
headerIcon: {
width: 22,
height: 16
}
})
Check This on
https://rnplay.org/apps/iSpc1Q