I'm new to react native, and I facing a problem to positioning my text.
I wanted to have something like this:
Hi, Daffa
XII RPL
but this my result:
Hi, Daffa XII RPL
here's my code:
import React from 'react';
import {View, StyleSheet, Text, Image} from 'react-native';
export default function Header() {
return (
<View style={styles.header}>
<Image style={styles.img} source={require('../assets/me.png')} />
<Text style={styles.text}>Hi, Daffa Quraisy</Text>
<Text style={styles.kelas}>XII RPL</Text>
</View>
);
}
const styles = StyleSheet.create({
header: {
height: 200,
backgroundColor: '#327fe3',
flexDirection: 'row',
alignItems: 'center',
},
img: {
height: 50,
width: 50,
marginLeft: 20,
padding: 0,
},
text: {
color: 'white',
marginLeft: 18,
fontWeight: 'bold',
},
kelas: {
color: 'white',
fontSize: 12,
marginLeft: 18,
flexWrap: 'nowrap',
},
});
thanks for reading this, I'm sorry if my question is kinda stupid, and sorry for my bad english.
Working App: Expo snack
Wrap Text components in View component:
import React from 'react';
import { View, StyleSheet, Text, Image } from 'react-native';
export default function Header() {
return (
<View style={styles.header}>
<Image style={styles.img} source={require('./assets/snack-icon.png')} />
<View>
<Text style={styles.text}>Hi, Daffa Quraisy</Text>
<Text style={styles.kelas}>XII RPL</Text>
</View>
</View>
);
}
const styles = StyleSheet.create({
header: {
height: 200,
backgroundColor: '#327fe3',
flexDirection: 'row',
alignItems: 'center',
},
img: {
height: 50,
width: 50,
marginLeft: 20,
padding: 0,
},
text: {
color: 'white',
marginLeft: 18,
fontWeight: 'bold',
},
kelas: {
color: 'white',
fontSize: 12,
marginLeft: 18,
flexWrap: 'nowrap',
},
});
you can use {\n} this tag to break line
<View style={styles.header}>
<Image style={styles.img} source={require('../assets/me.png')} />
<Text style={styles.text}>Hi, Daffa Quraisy {`\n`} <Text style={styles.kelas}>
XII RPL</Text>
</Text>
</View>
The <View> element is the default value column but you header class with change row. New <View> element wrapper texts for your fix.
Related
I have an app with a basic home screen component that is full screen and I want to do it that the user can scroll down to the next component that I made that is also full screen (like the scroll on TikTok between videos) but when I add ScrollView the screen goes white
how can I add scroll to the app?
code app.js:
import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, ImageBackground, Image, View, ScrollView, } from 'react-native';
import Riverdale from './components/riverdale';
export default function App() {
return (
<ScrollView>
<View style={styles.container}>
<Riverdale
backgroundImage={require('./assets/images/riverdale.jpg')}
titleText="Riverdale"
subTitleText="The town with pep"
content="Riverdale is a small town in the fictional town of Midtown Manhattan. The town is known for its eclectic character, which makes it a perfect place to live."
titleTextStyle={{
fontSize: 42,
color: '#fff',
fontWeight: '600',
}}
subTitleTextStyle={{
fontSize: 12,
//transform to upper case
textTransform: 'uppercase',
color: '#FDEFF4',
}}
contentTextStyle={{
fontSize: 18,
color: '#fff',
}}
//titleTextStyle= {styles.titleText}
//subTitleTextStyle= {styles.subTitleText}
//contentTextStyle= {styles.contentText}
/>
<Riverdale
backgroundImage={require('./assets/images/riverdale.jpg')}
titleText="Riverdale"
subTitleText="The town with pep"
content="Riverdale is a small town in the fictional town of Midtown Manhattan. The town is known for its eclectic character, which makes it a perfect place to live."
titleTextStyle={{
fontSize: 42,
color: '#fff',
fontWeight: '600',
}}
subTitleTextStyle={{
fontSize: 12,
//transform to upper case
textTransform: 'uppercase',
color: '#FDEFF4',
}}
contentTextStyle={{
fontSize: 18,
color: '#fff',
}}
/>
<StatusBar style="auto" />
</View>
</ScrollView>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
},
});
code index.js:
import React from "react";
import { StyleSheet, Text, View, ImageBackground, Image, TouchableOpacity } from "react-native";
const Riverdale = (props) => {
const {backgroundImage, titleText, subTitleText, content} = props;
const {titleTextStyle, subTitleTextStyle, contentTextStyle} = props;
return (
<ImageBackground source={backgroundImage} style={styles.imgBackground}>
<View style={styles.title}>
<Text style={titleTextStyle}>{titleText}</Text>
<View style={styles.subTitle}>
<Text style={subTitleTextStyle}>{subTitleText}</Text>
</View>
</View>
<View style={styles.content}>
<Text style={contentTextStyle}>{content}</Text>
</View>
</ImageBackground>
);
}
const styles = StyleSheet.create({
title: {
width: '100%',
position: 'absolute',
top: '10%',
alignItems: 'center',
justifyContent: 'center',
},
subTitle: {
},
imgBackground: {
width: '100%',
height: '100%',
//set the image to cover the entire screen
resizeMode: 'cover',
},
content: {
width: '100%',
position: 'absolute',
top: '20%',
},
});
export default Riverdale;
I'm trying to do something like that last image, the one that has the product detail to add to cart with the blurred background
Is there a way to make that floating screen in react navite?
I'm looking for something maybe similar to it, I don't really care about the content inside of it, just the general screen popup
I dont know how its called, so pointing me in a direction to do research or just naming it so I can google it would very much be appreciated it
It's called Modal and you can use React Native's component to present it. Check for official documentation https://reactnative.dev/docs/modal
For the blur part, you can use this library https://github.com/Kureev/react-native-blur
Here is a sample code to show the modal:
import React, { useState } from "react";
import { Alert, Modal, StyleSheet, Text, Pressable, View } from "react-native";
const App = () => {
const [modalVisible, setModalVisible] = useState(false);
return (
<View style={styles.centeredView}>
<Modal
animationType="slide"
transparent={true}
visible={modalVisible}
onRequestClose={() => {
Alert.alert("Modal has been closed.");
setModalVisible(!modalVisible);
}}
>
<View style={styles.centeredView}>
<View style={styles.modalView}>
<Text style={styles.modalText}>Hello World!</Text>
<Pressable
style={[styles.button, styles.buttonClose]}
onPress={() => setModalVisible(!modalVisible)}
>
<Text style={styles.textStyle}>Hide Modal</Text>
</Pressable>
</View>
</View>
</Modal>
<Pressable
style={[styles.button, styles.buttonOpen]}
onPress={() => setModalVisible(true)}
>
<Text style={styles.textStyle}>Show Modal</Text>
</Pressable>
</View>
);
};
const styles = StyleSheet.create({
centeredView: {
flex: 1,
justifyContent: "center",
alignItems: "center",
marginTop: 22
},
modalView: {
margin: 20,
backgroundColor: "white",
borderRadius: 20,
padding: 35,
alignItems: "center",
shadowColor: "#000",
shadowOffset: {
width: 0,
height: 2
},
shadowOpacity: 0.25,
shadowRadius: 4,
elevation: 5
},
button: {
borderRadius: 20,
padding: 10,
elevation: 2
},
buttonOpen: {
backgroundColor: "#F194FF",
},
buttonClose: {
backgroundColor: "#2196F3",
},
textStyle: {
color: "white",
fontWeight: "bold",
textAlign: "center"
},
modalText: {
marginBottom: 15,
textAlign: "center"
}
});
export default App;
I'm a Newbie in React Native. And I'm trying to create a login screen with a normal "ENTER" button and Facebook and google "login with" buttons. For the social network buttons, I used expo vector-icons, but for the normal button, I created a .js file to host the button code so I can use it on other pages. The problem is: the button's styles are not being applied when I'm using it on this specific screen, for some reason... Am I doing something wrong?
Here is the code for the login screen:
import React from 'react';
import { View, Text, KeyboardAvoidingView, TextInput, StyleSheet } from 'react-native';
import { FontAwesome, Zocial } from '#expo/vector-icons';
import { SafeAreaView } from 'react-native-safe-area-context';
import SubmitButton from '../../shared/SubmitButton';
import FocusAwareStatusBar from '../../shared/StatusBar';
const styles = StyleSheet.create({
background: {
flex: 1,
backgroundColor: '#fafafa',
alignItems: 'center',
justifyContent: 'flex-start',
paddingHorizontal: 16
},
loginform: {
alignSelf: "stretch",
marginTop: 64,
},
inputs: {
alignSelf: "stretch",
fontFamily: "Roboto_400Regular",
fontSize: 14,
color: "#000",
borderBottomColor: '#dcdcdc',
borderBottomWidth: 0.8,
paddingBottom: 8,
paddingLeft: 12,
},
loginSocialNetworkContainer: {
justifyContent: "center",
alignSelf: "center",
backgroundColor: '#fff',
elevation: 6,
borderRadius: 6,
marginBottom: 8,
},
loginSocialNetwork: {
alignContent: "center",
justifyContent: "center",
width: 232,
height: 40,
borderRadius: 2,
},
loginSocialNetworkText: {
fontSize: 12,
fontFamily: "Roboto_400Regular",
color: "#f7f7f7",
},
});
export default function Login({ navigation }) {
return (
<SafeAreaView style={{ flex: 1 }}>
<FocusAwareStatusBar barStyle='light-content' backgroundColor='#88c9bf' />
<KeyboardAvoidingView style={styles.background}>
<View style={styles.loginform}>
<TextInput style={{ ...styles.inputs, marginBottom: 20 }}
placeholder="Nome de usuário"
autoCorrect={false}
onChangeText={() => { }}
/>
<TextInput style={{ ...styles.inputs, marginBottom: 52 }}
placeholder="Senha"
autoCorrect={false}
secureTextEntry={true}
onChangeText={() => { }}
/>
<SubmitButton text='ENTRAR' onPress={() => { }} />
<View style={{ ...styles.loginSocialNetworkContainer, marginTop: 72 }}>
<FontAwesome.Button name='facebook-square' style={styles.loginSocialNetwork} size={17.5} iconStyle={{ color: '#f7f7f7' }} backgroundColor="#194f7c" onPress={() => { }}>
<Text style={styles.loginSocialNetworkText}>ENTRAR COM FACEBOOK</Text>
</FontAwesome.Button>
</View>
<View style={styles.loginSocialNetworkContainer}>
<Zocial.Button name='googleplus' style={styles.loginSocialNetwork} size={15} iconStyle={{ color: '#f7f7f7', marginRight: 9.3, marginLeft: 0.3 }} backgroundColor="#f25f5c" onPress={() => { }}>
<Text style={{ ...styles.loginSocialNetworkText, paddingRight: 14 }}>ENTRAR COM GOOGLE</Text>
</Zocial.Button>
</View>
</View>
</KeyboardAvoidingView>
</SafeAreaView>
);
}
And here is the SubmitButton's code:
import React from 'react';
import { View, StyleSheet, TouchableOpacity, Text } from 'react-native';
export default function SubmitButton({ text, onPress, color }) {
return (
<View style={styles.container}>
<TouchableOpacity onPress={onPress}>
<View style={ color != null ? {...styles.button, backgroundColor: color} :styles.button} >
<Text style={styles.buttonText}>{text}</Text>
</View>
</TouchableOpacity>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: "center",
alignSelf: "center",
backgroundColor: '#fafafa',
elevation: 6,
borderRadius: 2,
width: 232,
height: 40,
},
button: {
justifyContent: "center",
alignItems: "center",
backgroundColor: '#88c9bf',
width: 232,
height: 40,
borderRadius: 2,
},
buttonText: {
fontFamily: "Roboto_400Regular",
fontSize: 12,
textTransform: 'uppercase',
textAlign: "center",
color: '#434343',
}
});
As we can see, the elevation is not getting applied nor the button can be
pressed:
Import React in your login page
import React from 'react';
import { View, Text, KeyboardAvoidingView, TextInput, StyleSheet } from 'react-native';
import { FontAwesome, Zocial } from '#expo/vector-icons';
import { SafeAreaView } from 'react-native-safe-area-context';
import SubmitButton from '../../shared/SubmitButton';
import FocusAwareStatusBar from '../../shared/StatusBar';
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
const LotsOfStyles = () => {
return (
<View style={styles.container}>
<Text style={styles.red}>just red</Text>
<Text style={styles.bigBlue}>just bigBlue</Text>
<Text style={[styles.bigBlue, styles.red]}>bigBlue, then red</Text>
<Text style={[styles.red, styles.bigBlue]}>red, then bigBlue</Text>
</View>
);
};
const styles = StyleSheet.create({
container: {
marginTop: 50,
},
bigBlue: {
color: 'blue',
fontWeight: 'bold',
fontSize: 30,
},
red: {
color: 'red',
},
});
export default LotsOfStyles;
I have been trying to develop screen mentioned below:
For that I have created below component:
import React, {Component} from 'react';
import {View, Text, StyleSheet, ImageBackground, Image} from 'react-native';
import Balance from './Balance.js'
class AccountHeader extends React.Component{
render(){
return(
<ImageBackground
source={require('../images/lawrance.jpg')}
style={styles.container}>
<View style={styles.overlay}></View>
<Text style = {[styles.textStyle, {paddingTop: 10}]} >My Account</Text>
<Image source= {require('../images/lawrance.jpg')}
style={styles.avatarStyle}/>
<Text style = {styles.textStyle} > Jenifer Lawrance</Text>
<Text style = {styles.textStyle} > +14155552671</Text>
<Balance style= {styles.balanceContainer}/>
</ImageBackground>
);
}
}
const styles = StyleSheet.create({
container: {
backgroundColor:'red',
opacity: 0.6
},
overlay: {
backgroundColor:'transparent',
opacity: 0.6
},
avatarStyle: {
width:100,
height: 100,
marginTop: 10,
borderRadius: 50,
alignSelf: 'center',
},
textStyle: {
marginTop: 10,
fontSize: 18,
color: "#FFFFFF",
fontWeight: 'bold',
alignSelf: 'center',
},
balanceContainer:{
padding:10,
}
});
export default AccountHeader;
Now here are two issues:
Changing the opacity of ImageBackground also change the opacity of its children
Not able to change the color of opacity
Any help appreciated!
Design screen:
Developed Screen
Try this :
<ImageBackground source={require('./images/backgroundBlue.jpg')} imageStyle=
{{opacity:0.5}}/>
it works
Use this code, it's working, I just made a minor change
import React, {Component} from 'react';
import {View, Text, StyleSheet, ImageBackground, Image,Dimensions} from 'react-native';
class AccountHeader extends React.Component{
render(){
return(
<ImageBackground
source={{uri:'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSoOVTmb0ILbDI6ggGhPKUkn3v4UKc2dNB-Kjng7aGM14UbvzKY'}}
style={styles.container}>
<View style={styles.overlay}>
<Text style = {[styles.textStyle, {paddingTop: 10}]} >My Account</Text>
<Image source= {{uri:'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSoOVTmb0ILbDI6ggGhPKUkn3v4UKc2dNB-Kjng7aGM14UbvzKY'}}
style={styles.avatarStyle}/>
<Text style = {styles.textStyle} > Jenifer Lawrance</Text>
<Text style = {styles.textStyle} > +14155552671</Text>
</View>
</ImageBackground>
);
}
}
const styles = StyleSheet.create({
container: {
},
overlay: {
backgroundColor:'rgba(255,0,0,0.5)',
},
avatarStyle: {
width:100,
height: 100,
marginTop: 10,
borderRadius: 50,
alignSelf: 'center',
},
textStyle: {
marginTop: 10,
fontSize: 18,
color: "#FFFFFF",
fontWeight: 'bold',
alignSelf: 'center',
},
balanceContainer:{
padding:10,
}
});
export default AccountHeader;
For me worked just applying some opacity to the ImageBackground component and at the same time a background color like this:
<ImageBackground source={background} style={{ width: window.width, height: window.height - 24, backgroundColor: 'rgb(255,0,0)' }} resizeMode="cover" imageStyle={{opacity: 0.4}} >
</ImageBackground>
Try changing the container's style to
container: {
backgroundColor: 'rgba(255,0,0,.6)'
},
Trying to get a text which is a currency (52 0000,00 USD) where I want the ticker to have a different font weight than the amount. I want the text to fill the whole screen width using adjustsFontSizeToFit.
When using the same Text and fontWeight it works but using nested <Text> scales down the font size a lot more than necessary?
You can try yourself here:
https://snack.expo.io/Hk1-K3RwG
import React, { Component } from 'react';
import { Text, View, StyleSheet } from 'react-native';
import { Constants } from 'expo';
export default class App extends Component {
render() {
return (
<View style={styles.container}>
<Text style={[styles.text, {fontWeight: '900'}]} adjustsFontSizeToFit numberOfLines={1}>
{'245,000.00'}{'\u00a0'}USD
</Text>
<Text style={styles.text} adjustsFontSizeToFit numberOfLines={1}>
<Text style={{ fontWeight: '900'}}>{'245,000.00'}</Text>
{'\u00a0'}
<Text style={{ fontWeight: '400'}}>USD</Text>
</Text>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
paddingTop: Constants.statusBarHeight,
backgroundColor: '#ecf0f1',
},
text: {
height: 50,
fontSize: 60,
padding: 0,
margin: 0,
width: '100%',
textAlign: 'center',
},
});