We Keep Coding

Expo React Native Loads Custom Font Only Once

everyone. I'm new around here. I'm using Expo for building a react native app. I want to implement the custom fonts in my project. So I've gone through the docs, https://docs.expo.io/guides/using-custom-fonts
But the problem is only one components gets custom fonts, None of other components don't loads the custom fonts.
Here is my code,
App.js
import React from "react";
import {
StyleSheet,
SafeAreaView,
Image,
StatusBar,
Platform,
Text
} from "react-native";
import WelcomeScreen from "./app/screen/WelcomeScreen";
//import ViewImageScreen from "./app/screen/ViewImageScreen";
import {
useFonts,
Poppins_300Light,
Poppins_400Regular,
Poppins_400Regular_Italic,
Poppins_500Medium,
Poppins_700Bold,
Poppins_900Black,
} from "#expo-google-fonts/poppins";
import { AppLoading } from "expo";
export default function App() {
let [fontsLoaded] = useFonts({
"Shamim-Bn": require(
'./app/assets/Shamim-Font-Bn.ttf'
),
"Poppins-Light": Poppins_300Light,
"Poppins-Regular": Poppins_400Regular,
"Poppins-Regular-Italic": Poppins_400Regular_Italic,
"Poppins-Medium": Poppins_500Medium,
"Poppins-Bold": Poppins_700Bold,
"Poppins-Black": Poppins_900Black,
});
if(fontsLoaded){
return (
<SafeAreaView style={styles.container}>
// Only this components gets Custom font
<Text style={styles.custom}>পছন্দের ঘর এখন এখানেই...</Text>
<WelcomeScreen />
</SafeAreaView>
)
} else{
return(
<AppLoading />
)
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: "#fff",
marginTop: Platform.OS === "android" ? StatusBar.currentHeight : 0,
justifyContent: "center",
alignItems: "center",
},
custom:{
fontFamily: 'Shamim-Bn',
fontSize: 20,
}
});
WelcomeScreen.js
import React from 'react';
import {StyleSheet, ImageBackground, View, Image, Text} from 'react-native';
import colors from '../config/colors';
function WelcomeScreen(){
return(
<ImageBackground
style={styles.background}
source={require('../assets/welcome-bg.png')}>
<View style={styles.logoBox}>
<Image style={styles.logo} source={require('../assets/logo.png')} />
<Text style={styles.tagline}>পছন্দের ঘর এখন এখানেই...</Text>
</View>
<View style={styles.loginBtn}></View>
<View style={styles.signupBtn}></View>
</ImageBackground>
)
}
//
const styles = StyleSheet.create({
background: {
flex: 1,
alignItems: "center",
justifyContent: "flex-end"
},
logoBox: {
position: "absolute",
top: 80,
alignItems: "center"
},
logo: {
width: 240,
height: 120,
},
tagline:{
marginTop: 10,
fontSize: 19,
fontWeight: "700",
color: colors.sub,
fontFamily: 'Shamim-Bn',
},
loginBtn:{
backgroundColor: colors.main,
width: "100%",
height: 70
},
signupBtn:{
backgroundColor: colors.sub,
width: "100%",
height: 70
}
});
export default WelcomeScreen;
Edit:
More preciously, The view only declared in to App.js gets the custom font. The view like WelcomeScreen.js, I import to App.js doesn't get custom fonts.
Please help.

I've solve this problem. If you set fontWeight property along with custom font in the styles declaration, the <Text> components rendered the default fonts available on the device. The only way you can use different variants of the fonts by importing and declaring the font variants like this:
let [fontsLoaded] = useFonts({
"Shamim-Bn": require(
'./app/assets/Shamim-Font-Bn.ttf'
),
"Poppins-Light": Poppins_300Light,
"Poppins-Regular": Poppins_400Regular,
"Poppins-Regular-Italic": Poppins_400Regular_Italic,
"Poppins-Medium": Poppins_500Medium,
"Poppins-Bold": Poppins_700Bold,
"Poppins-Black": Poppins_900Black,
});
Later set the fonFamily property to Poppins-Regular or Poppins-Bold.
Again, don't use the fontWeight property with it.

Fontweight - Bold not working in react native page

I am new to React Native, now I want to make a sample project.
I see there is an option for making a text bold by using 'fontWeight'.
I am Using expo.
But even if I use this property for my <Text> tag, I can't see any changes.
Can you suggest me any possibilities and solutions?
Here is what i tried.
import React, { Component } from 'react';
import { StyleSheet, Text, View, Button, TouchableOpacity } from 'react-native';
import { Image } from 'react-native';
import { FlatList, ActivityIndicator } from 'react-native';
export default class Screen1 extends Component {
//Screen1 Component
constructor(props){
super(props);
}
render() {
return(
<View style={{flex: 1, padding: 20}}>
<Text style={{ fontWeight: 'bold' }} >Bold Text</Text>
</View>
)
}
}

There isn't an issue with your style, your style is perfect as it is { fontWeight: 'bold' }, but your <Text/> component is not correctly.
<Text/>Bold Text</Text>
You have an extra '/' inside of your JSX component. It should be like this:
<Text>Bold Text</Text>
Want to see an example? https://snack.expo.io/#abranhe/bold-example
import React from 'react';
import { View, Text } from 'react-native';
export default () => (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text style={{ fontWeight: 'bold' }}>Bold Text</Text>
</View>
);
By the way, you are also missing React from your imports, and it is required.

the issue was solved by changing my mobile's system font.
I have changed my system font once. that was not accepting Bold. that was the issue.

your mistake in TEXT tag , try this
<Text style={{ fontWeight: 'bold' }} >Bold Text</Text>

React Native Custom TextInput Placeholder

I know you can dynamically change the Placeholder text and style, but can you create a custom Placeholder view all together?
This is what I'm trying to achieve:
Is it possible to do something like this?

I would suggest you to use custom style with the functional component.Create a functional component called RenderInput for which pass placeholder as props.
import React, {Component} from 'react';
import {TextInput, View, Text} from 'react-native';
const RenderInput = ({ label , inputvalue,styleLabel, ipOnChangeText, placeholder}) => {
const {inputStyle, labelStyle, containerStyle} = styles;
return(
<View style = {containerStyle}>
<Text style= {styleLabel ? labelStyle : ""} >{label}</Text>
<TextInput
autoCorrect={false}
placeholder={placeholder}
style= {inputStyle}
/>
</View>
);
}
const styles ={
inputStyle:{
color: '#333',
fontSize: 16,
lineHeight: 23,
borderBottomColor: '#333',
borderBottomWidth: 0.5,
fontFamily: 'System',
},
labelStyle:{
fontSize: 18,
color: '#737373',
paddingBottom: 10,
fontFamily: 'System',
position: 'relative',
':after': {
content: '* ',
position: absolute,
left: 5,
top: 0,
color: '#bbb'
}
},
containerStyle:{
flexDirection: 'column',
marginTop: 10,
marginBottom: 10
}
}
export { RenderInput };

You can do something like this
<TextInput
placeholder="YOUR TEXT"
placeholderTextColor="#555555"
/>
OR of course you can create your own version of the component TextInput something that contains the custom placeholder on top of the TextInput and once the text change you hide the custom placeholder

Flex header layout in React Native

I'm new here on react native, And i was trying to align the back button to the left, But keeping the title on the center, But nothing works, This is the code.
The TouchableOpacity is the back button, And the Text is the title, Each one have his own style.
import React, { Component } from 'react';
import { View, Text, TouchableOpacity, Image } from 'react-native';
import { Colors } from '../Variables';
class Header extends Component {
render(){
return(
<View style={ styles.headerStyle }>
<TouchableOpacity>
<Image style={ styles.backBtnStyle } source={ require('../graphics/icons/arrow_left_white.png') }/>
</TouchableOpacity>
<Text style={ styles.titleStyle }>
TITLE
</Text>
</View>
);
}
}
const styles = {
headerStyle: {
backgroundColor: Colors.primary,
flexDirection: 'row',
alignItems: 'center',
},
backBtnStyle: {
width: 25,
height: 25,
margin: 10,
},
titleStyle: {
color: '#fff',
textAlign: 'center',
fontSize: 25,
}
};
export default Header;
Thanks for helping.

You should try to view this document about Flex in React native and practive more to mastered it.
In Your case, just simplify add alignSelf: 'flex-start' to backBtnStyle StyleSheet to make it in first of your parent component
Here is demo code:
headerStyle: {
backgroundColor: Colors.primary,
flexDirection: 'row',
alignItems: 'center',
alignSelf: 'flex-start'
},
<TouchableOpacity style={styles.backBtnStyle}>
<Image source={require('../graphics/icons/arrow_left_white.png') }/>
</TouchableOpacity>
You see: TouchableOpacity contain a Viewable Layout and wrap your image then you need to set style for TouchableOpacity to make flex work, not at Image.
From React NativeTouchableOpacity Documents: Opacity is controlled by wrapping the children in an Animated.View, which is added to the view hierarchy. Be aware that this can affect layout.
You can see Touchable Opacity Document here
Note: Set Your StyleSheet on StyleSheet.create() to make it create one and only one time when your bundle load. It make your app light weight and faster
Read about React Native StyleSheet here

You are using alignItems: 'center' in your container, so everything will be in the center.
In your case, there are a lot of solutions available. The more simple is just use a position: absolute; left: 15 in the styles.backBtnStyle.

How to change background color of react native button

I am trying to change the background color of my button but nothing seems to work, I tried the raised property, maybe i am using it incorrectly. Do any of you have any ideas?
import React from 'react';
import { StyleSheet, Text, View, Button, TouchableHighlight } from 'react-native';
export default class App extends React.Component {
state={
name: "Mamadou"
};
myPress = () => {
this.setState({
name: "Coulibaly"
});
};
render() {
return (
<View style={styles.container}>
<Button
title={this.state.name}
color="red"
onPress={this.myPress}
/>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});

Use this for adding the background color to the button in iOS:
Styles:
loginScreenButton:{
marginRight:40,
marginLeft:40,
marginTop:10,
paddingTop:10,
paddingBottom:10,
backgroundColor:'#1E6738',
borderRadius:10,
borderWidth: 1,
borderColor: '#fff'
},
loginText:{
color:'#fff',
textAlign:'center',
paddingLeft : 10,
paddingRight : 10
}
Button:
<TouchableOpacity
style={styles.loginScreenButton}
onPress={() => navigate('HomeScreen')}
underlayColor='#fff'>
<Text style={styles.loginText}>Login</Text>
</TouchableOpacity>
For Android it simply works with Button color property only:
<Button onPress={onPressAction} title="Login" color="#1E6738" accessibilityLabel="Learn more about this button" />

I suggest to use React Native Elements package, which allow to insert styles throught buttonStyle property.
styles:
const styles = StyleSheet.create({
container: {
flex: 1
},
button: {
backgroundColor: '#00aeef',
borderColor: 'red',
borderWidth: 5,
borderRadius: 15
}
})
render()
render() {
return (
<View style={styles.container}>
<Button
buttonStyle={styles.button}
title="Example"
onPress={() => {}}/>
</View>
)
}
Effect:
Expo Snack: https://snack.expo.io/Bk3zI0u0G

"color" property applies to background only if you're building for android.
Other than that I personally find it easier to manage custom buttons. That is create your own component named button and have it as a view with text. This way its way more manageable and you can import it as easy as Button.

this answer is little bit late, but can be good for anothers.
To solve this problem it is better to use "Text" Component as a Button
fist make a component name it AppButton
function AppButton({children,style,onPress}) {
return (
<TouchableOpacity onPress={onPress}>
<Text
style={[styles.appButton,style]} >
{children}
</Text>
</TouchableOpacity>
);
}
export default AppButton;
then Import it in where that you want to use it
import AppButton from './AppButton';
and with this line you can call your custom Button that actually is a Text which you can customize it.
remember onPress Event have to calling in TouchableOpacity not Text:
<AppButton style={styles.appOk} onPress={()=> visibleFunc(false)} >Ok</AppButton>

Maybe Pressable is what you're looking for; it allows you to add style to a pressable component (like a button).Read more here
Sample code:
import React from 'react';
import { Text, View, StyleSheet, Pressable } from 'react-native';
export default function Button(props) {
const { onPress, title = 'Save' } = props;
return (
<Pressable style={styles.button} onPress={onPress}>
<Text style={styles.text}>{title}</Text>
</Pressable>
);
}
const styles = StyleSheet.create({
button: {
alignItems: 'center',
justifyContent: 'center',
paddingVertical: 12,
paddingHorizontal: 32,
borderRadius: 4,
elevation: 3,
backgroundColor: 'black',
},
text: {
fontSize: 16,
lineHeight: 21,
fontWeight: 'bold',
letterSpacing: 0.25,
color: 'white',
},
});

You should use the hex code backgroundColor="#FF0000" instead of color="red". Also please use raised={true} other wise background color is not override.