Develop Reference

React Native, Height is being auto adjusted even when defined

Im new to this framework, So this is the code:
import { StatusBar } from 'expo-status-bar';
import React from 'react';
import { SafeAreaView, StyleSheet, Text, View } from 'react-native';
import { MainLogo } from '../../logos/mainLogo';
import { TextInput } from "react-native";
export function Home() {
return (
<SafeAreaView>
<View style={styles.firstBackGround}>
<MainLogo/>
<Text style={{fontSize:25,fontWeight:'bold',color:'rgb(108,
150, 232)',}}>LIBRARY</Text>
</View>
<TextInput placeholder='Search Song or Artist' style=
{styles.secondBackGround} placeholderTextColor="#6b7eb1" >
</TextInput>
<Text style={styles.recommendedText}>Recommended</Text>
</SafeAreaView>
);
}
const styles = StyleSheet.create(
{
container: {
},
firstBackGround: {
flexDirection:'row',
alignItems:'center',
flex:0,
},
secondBackGround:{
backgroundColor: '#3f4d7e',
width:'83%',
marginTop:10,
height:'17%',
borderRadius:20,
flex:0,
marginLeft:'auto',
marginRight:'auto',
paddingLeft: 20,
},
recommendedText:{
fontSize:17,
flex:0,
flexDirection:'row',
fontWeight:'bold',
color:'rgb(108, 150, 232)',
marginLeft:20,
marginTop:100,
}
});
here is the image of result:
the more i increase the top margin for recommended text, it auto changes the input field height. I solved this problem by mistake between First View and text input but i cant do it again between text input and Text(recommended)

the height is increasing because you gave it in % and also flex:0 has no impact.
use like this
import React from 'react';
import { Dimensions, SafeAreaView, StyleSheet, Text, View } from 'react-native';
import { TextInput } from "react-native";
const { width } = Dimensions.get('window')
export default function SettingsScreen() {
return (
<SafeAreaView style={{ flex: 1 }}>
<View style={styles.firstBackGround}>
<Text style={{ fontSize: 25, fontWeight: 'bold', color: 'rgb(108,150, 232)', }}>LIBRARY</Text>
</View>
<TextInput placeholder='Search Song or Artist' style={styles.secondBackGround} placeholderTextColor="#6b7eb1" />
<Text style={styles.recommendedText}>Recommended</Text>
</SafeAreaView>
);
}
const styles = StyleSheet.create(
{
container: {
},
firstBackGround: {
flexDirection: 'row',
alignItems: 'center',
flex: 0,
},
secondBackGround: {
backgroundColor: '#3f4d7e',
width: '83%',
marginTop: 10,
// height: '17%',
height: width / 7.5,
borderRadius: 20,
// flex: 0,
marginLeft: 'auto',
marginRight: 'auto',
paddingLeft: 20,
},
recommendedText: {
fontSize: 17,
// flex: 0,
flexDirection: 'row',
fontWeight: 'bold',
color: 'rgb(108, 150, 232)',
marginLeft: 20,
marginTop: 200,
backgroundColor: 'red'
}
});
if you want to make design responsive then
step:1 - get a scale of figma or xd screen (eg 375 width)
step:2 -say your height of a view is 50 then divide 375/50 = 7.5
step:3 - use height width/7.5 ( width of your current window, get this by using Dimensions API)
another way is use this library react-native-size-matters

ScrollView hide screen content

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;

React Native how to use like <br> inside flex direction row

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.

Styles not working properly in an specific page

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;

How to setup adjustsFontSizeToFit to scale text in nested Text components in react native?

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',
},
});