I want to create round shape button for my app which is build upon react native. I had tried the code below but both of them didn't work out for me.
Code snippet 1: <Button title="+" rounded="true"/>
Code snippet 2: addButton: {
width: 20,
height: 20,
borderRadius: 40
}
Basically, you have to style up Views and Touchables to look like the button you want. Here's an example of a circular button component:
import React from 'react';
import { TouchableOpacity, Text, StyleSheet } from 'react-native';
export default ({ title, onPress }) => <TouchableOpacity onPress={onPress} style={styles.button}>
<Text style={styles.title}>{title}</Text>
</TouchableOpacity>
const styles = StyleSheet.create({
button: {
width: 50,
height: 50,
borderRadius: 25,
backgroundColor: 'red',
alignItems: 'center',
justifyContent: 'center',
},
title: {
color: 'white',
}
})
Related
Can someone help me with this Component, i want to make like this, but dont know how this white frames called? Can someone tell me this? And if we press that yellow Touchable Opacity it is showing whole Text, and if we press again it will became smaller!
Thanks in Advance , I am Just new in RN
You can easily create that card with a little bit of CSS.
Below is the sample app which shows you how you can achieve that.
Working Example: Expo Snack
import React, { useState, useEffect } from 'react';
import {
Text,
View,
StyleSheet,
FlatList,
Image,
TouchableOpacity,
} from 'react-native';
import { AntDesign } from '#expo/vector-icons';
import Constants from 'expo-constants';
import { newsFeed } from './news';
export default function App() {
const [news, setNews] = useState(newsFeed);
const showFull = (index) => {
const temp = [...news];
temp[index].toggle = !temp[index].toggle;
setNews(temp);
};
return (
<View style={styles.container}>
<FlatList
data={news}
renderItem={({ item, index }) => (
<View style={styles.card}>
<Text style={styles.title}>{item.title}</Text>
<Text style={styles.paragraph}>
{item.toggle ? item.desc : `${item.desc.substr(0, 100)}...`}
</Text>
{item.toggle && (
<Image source={{ uri: item.img }} style={styles.img} />
)}
<View style={styles.bottomBar}>
<Text style={styles.date}>4/02/2021</Text>
<TouchableOpacity onPress={() => showFull(index)}>
<View style={{ flexDirection: 'row', alignItems: 'center' }}>
<Text style={styles.moreBtn}>
{!item.toggle ? 'More' : 'Less'}
</Text>
<AntDesign
name={item.toggle ? 'up' : 'down'}
size={12}
color="orange"
/>
</View>
</TouchableOpacity>
</View>
</View>
)}
/>
</View>
);
}
const styles = StyleSheet.create({
bottomBar: {
marginVertical: 5,
flexDirection: 'row',
justifyContent: 'space-between',
},
container: {
flex: 1,
justifyContent: 'center',
paddingTop: Constants.statusBarHeight,
backgroundColor: '#ecf0f1',
padding: 8,
},
card: {
padding: 10,
backgroundColor: 'white',
marginVertical: 5,
borderRadius: 10,
},
title: {
marginVertical: 5,
fontSize: 18,
fontWeight: 'bold',
},
img: {
flex: 1,
height: 100,
borderRadius: 10,
marginVertical: 5,
},
paragraph: {
fontSize: 14,
},
date: {
fontSize: 12,
color: 'rgba(21,21,21,0.5)',
},
moreBtn: {
fontSize: 12,
color: 'orange',
marginRight: 10,
},
});
actually this card is not a component you can design it using css and if you want to create a component which you can reuse then you can make one component and reuse it as you want and for this card either you can use your own css or a library called native-base which is
like bootstrap but it is used in react-native
you can read about native base here for more information
https://nativebase.io/
and if you want to create card of your own then make a separate file and make a funcional card component in it
and call it wherever you like
import myCustomCard from './card'
and to use it you use like this in your jsx
<myCustomCard />
and if you want to know more about how to pass props and else you can checkout official docs of the react native here
https://reactnative.dev/docs/getting-started
I am fairly new to React Native and am struggling to get this page to show up when importing it to App.js. It was working by itself, but once I tried to clean things up and put the code into its own file and just call upon it, things went south.
To break things down;
Welcome.js contains the code of a "welcome page" I am trying to create
App.js is the default file created that basically just calls Welcome
and GetStartedButton is just the code of a button that is imported into Welcome but I dont think its necessary to provide.
When running App.js I am not receiving any errors, my screen is just white!
Thank you for any help, I appreciate it more than you know. I apologize for my ignorance!
It wouldnt surprise me if it was just another typo.
I am sure my code is horrible btw! Assuming my styles were an interesting way to do things! Learning...
Welcome.js
import React, { Component } from 'react';
import { StyleSheet, Text, View, Button} from 'react-native';
import GetStarted from './src/components/GetStartedButton';
export default class Welcome extends Component {
render() {
return (
<View style={styles.containerMain}>
<View style={styles.containerClub}>
<Text style={styles.title}>Word</Text>
</View>
<View style={styles.containerCaption}>
<Text style={styles.caption}> Words Words Words </Text>
</View>
<View style={styles.containerBottom}>
<GetStarted text='Get Started' color='#E50061' />
</View>
</View>
);
}
}
const styles = StyleSheet.create({
containerMain: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: 'black',
},
containerClub: {
position: 'absolute',
bottom: 288
},
containerCaption: {
position: 'absolute',
bottom: 250
},
/* To style the button and positioning*/
containerBottom: {
position: 'absolute',
bottom: 100
},
/* To style "Word"*/
title: {
fontSize: 35,
fontWeight: "bold",
},
/* To style "Words Words Words"*/
caption:
{
fontSize: 16
}
}
)
App.js
import React, { Component } from 'react';
import { StyleSheet, Text, View, Button} from 'react-native';
import Welcome from './src/pages/Welcome';
export default class App extends Component {
render() {
return (
<View style={styles.container}>
<Welcome/>
</View>
)
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
}
}
);
GetStartedButton.js
import React, { Component } from 'react';
import { StyleSheet, Text, View, TouchableOpacity } from 'react-native';
const GetStarted = props => {
const content = (
<View style={[styles.button, {backgroundColor: props.color}]}>
<Text style={styles.text}>{props.text}</Text>
</View>
)
return <TouchableOpacity onPress={props.onPress}>{content}</TouchableOpacity>
}
const styles = StyleSheet.create({
button: {
padding: 20,
width: 340,
borderRadius: 8,
alignItems: 'center',
},
text: {
color: 'white',
fontSize: 20,
justifyContent: 'center',
alignItems: 'center',
}
});
export default GetStarted;
The problem is in your Welcome component styles. You colored your texts white, so... it is all white.
const styles = StyleSheet.create({
// (...)
/* To style "word"*/
title: {
color: 'white', // remove it!
fontSize: 35,
fontWeight: "bold",
},
/* To style "words words words"*/
caption:
{
color: 'white', // remove it!
fontSize: 16
}
#edit
Also you did not apply your styles in your App component. It should look like this:
export default class App extends Component {
render() {
return (
<View style={styles.container}>
<Welcome/>
</View>
)
}
}
Try changing backgroundColor to something else other than white like
containerMain: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: 'black'
},
I am trying to make a component in my ReactNative app in which user can give only numbers as input, but my JavaScript reg expression is not working correctly. I used React Native hooks to manage states. I am trying to validate user input for only numbers, but input text field also replacing the numbers with empty string. The code of the component is follwoing;
import React, { useState } from 'react';
import { StyleSheet, Text, View, TextInput, Button, TouchableOpacity } from 'react-native';
import Card from '../components/Card';
import Colors from '../constants/Colors';
import Input from '../components/Input';
const StartGameScreen = props => {
const [enteredValue, setEnteredValue] = useState ('');
const numberInputHandler = inputText => {
setEnteredValue (inputText.replace(/[^0-9]/g, ''));
};
return (
<View style={styles.screen}>
<Text style={styles.title}>Start a New Game</Text>
<Card style={styles.inputContainer}>
<Text>Select a Number</Text>
<Input style={styles.inputText}
blurOnSubmit
auotCaptalize={'none'}
autoCorrect={false}
maxLength={2}
keyboardType={'number-pad'}
onChnageText={numberInputHandler}
value={enteredValue}
/>
<View style={styles.buttonContainer}>
<TouchableOpacity activeOpacity={0.4} style={{backgroundColor: Colors.accent, ...styles.button}}>
<Text style={styles.buttonText}>Reset</Text>
</TouchableOpacity>
<TouchableOpacity activeOpacity={0.4} style={{backgroundColor: Colors.primary, ...styles.button}}>
<Text style={styles.buttonText}>Confirm</Text>
</TouchableOpacity>
</View>
</Card>
</View>
);
}
const styles = StyleSheet.create({
screen: {
flex: 1,
padding: 10,
alignItems: 'center'
},
button: {
borderRadius: 8,
justifyContent: 'center',
alignItems: 'center',
height: 35,
width: 80
},
buttonText: {
color: 'white'
},
title: {
fontSize: 20,
marginVertical: 10
},
inputContainer: {
padding: 10,
width: 300,
height: 120,
maxWidth: '80%'
},
inputText: {
width: 35,
textAlign: "center",
},
buttonContainer: {
height: 30,
flexDirection: 'row',
width: '100%',
justifyContent: 'space-between',
paddingHorizontal: 15,
alignItems: "center"
}
});
export default StartGameScreen;
The code for the input component is following;
import React from 'react';
import { TextInput, StyleSheet} from 'react-native';
const Input = props => {
return (
<TextInput {...props} style={{...styles.input, ...props.style}}/>
);
}
const styles = StyleSheet.create({
input: {
height: 30,
borderBottomWidth: 1,
borderBottomColor: 'grey',
marginVertical: 10
}
});
export default Input;
You've misspelled the prop in your implementation of Input on your StartGameScreen component which is responsible for handling the change.
onChnageText should be onChangeText
The reason your non numbers are "replaced" as well is actually because the change handler isn't mapped to onChangeText due to that typo.
Extra Note:
You've also made another typo in your Input implementation.
auotCaptalize should be autoCapitalize
There are two spelling errors:
auotCaptalize={'none'} should be autoCapitalize={'none'}, and onChnageText={numberInputHandler} should be onChangeText={numberInputHandler}
I am currently trying to add a custom font to a react native app but after trying almost all answers i could find on SO and on google, it still doesn't work.
i tried to make react native aware of the font by add
"rnpm": {
"assets": [
"./assets/fonts/"
]
},
to the package.json and then running react-native link and also using the re-run commad. But still doesn't work.
Below is the code
app.js
import React, { useEffect } from 'react';
import { StyleSheet, Text, View, Image } from 'react-native';
import imager from './assets/cars.png';
import * as Font from 'expo-font';
export default function App() {
useEffect(() => {
async function loadFont() {
return await Font.loadAsync({
righteous: require('./assets/fonts/Righteous-Regular.ttf'),
});
}
loadFont();
}, []);
return (
<View style={styles.container}>
<Image style={styles.imager} source={imager} />
<Text
style={{
fontSize: 30,
fontWeight: 'bold',
paddingTop: 30,
fontFamily: 'righteous',
}}
>
Request Ride
</Text>
<Text style={{ fontSize: 15, padding: 40, textAlign: 'center' }}>
Request a ride and get picked up by a nearby community driver
</Text>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
imager: {
width: 200,
height: 200,
shadowColor: 'rgba(0, 0, 0, 0.2)',
shadowRadius: 10,
shadowOpacity: 1,
},
});
I have the font Righteous-Regular.ttf in ./assets/fonts but when i run this code, i get this error
fontFamily "righteous" is not a system font and has not been loaded through Font.loadAsync.
If you intended to use a system font, make sure you typed the name correctly and that it is supported by your device operating system.
If this is a custom font, be sure to load it with Font.loadAsync.
I researched but still can't find the solution to this. Please what could be the issue and how do i go about it?
You are trying to use the font before the font is loaded. You need to do something like this.
import React, { useEffect, useState } from 'react';
import { StyleSheet, Text, View, Image } from 'react-native';
import imager from './assets/cars.png';
import * as Font from 'expo-font';
export default function App() {
// use state for font status.
const [isFontReady, setFontReady] = useState(false)
useEffect(() => {
async function loadFont() {
return await Font.loadAsync({
righteous: require('./assets/fonts/Righteous-Regular.ttf'),
});
}
// after the loading set the font status to true
loadFont().then(() => {
setFontReady(true)
});
}, []);
return (
<View style={styles.container}>
<Image style={styles.imager} source={imager} />
{/* render the text after loading */}
{isFontReady && <Text
style={{
fontSize: 30,
fontWeight: 'bold',
paddingTop: 30,
fontFamily: 'righteous',
}}
>
Request Ride
</Text>}
<Text style={{ fontSize: 15, padding: 40, textAlign: 'center' }}>
Request a ride and get picked up by a nearby community driver
</Text>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
imager: {
width: 200,
height: 200,
shadowColor: 'rgba(0, 0, 0, 0.2)',
shadowRadius: 10,
shadowOpacity: 1,
},
});
It is up to you to display the element after the font is installed or to display it with a different font before.
Are you using react-native greater than or equal to 0.60? What you have done has worked in my project, but my project is below react-native 0.60. Above 0.60, apparently you have to change react-native.config.js instead of changing package.json. Here is a link to a tutorial that goes over that difference. It is in steop 3 of the tutorial: https://medium.com/#mehran.khan/ultimate-guide-to-use-custom-fonts-in-react-native-77fcdf859cf4
Ok guys, I've been trying to figure this out for the past 3 days and I can't find a solution, please keep in mind that I am self-taught and I've been studying react native for like 3 months now.
Anyways, I have a custom button with a defined style and everytime that I render my button it loads with the style presented in its file:
Botaozudo.js:
import React from 'react';
import { Text, TouchableOpacity, StyleSheet } from 'react-native';
export default class Botaozudo extends React.Component {
render() {
const { titulo, evento } = this.props;
return (
<TouchableOpacity
style={styles.button}
onPress={() => evento()}>
<Text style={styles.txtButton}>{titulo}</Text>
</TouchableOpacity>
);
}
}
const styles = StyleSheet.create({
btnAlinhar: {
alignItems: 'flex-end',
marginRight: 20,
paddingTop: 7
},
button: {
backgroundColor: '#a082c9',
width: 100,
height: 40,
borderRadius: 10
},
button2: {
backgroundColor: '#a082c9',
width: 300,
height: 90,
borderRadius: 10
},
txtButton: {
color: '#fff',
fontSize: 20,
textAlign: 'center',
paddingVertical: 5
}
});
Lets say that I want two different buttons on my App.js, one that looks like exactly as above and another one with different size and background color. In my mind I just have to do something like this (for the different one):
<Botaozudo
style={styles.newBtn}
titulo='I am a button'
event={() =>
console.log('yup I am a button')}/>
const styles = StyleSheet.create({
newBtn: {
backgroundColor: '#7c7070',
width: 200,
height: 100
}
});
But the thing is that my Botaozudo doesn't know what that style={} prop means. And what I can't figure out is HOW to make my custom component understand it.
Thanks in advance,
Install https://www.npmjs.com/package/prop-types
Then in Botaozudo.js:
import React from 'react';
import { Text, TouchableOpacity, StyleSheet } from 'react-native';
import PropTypes from 'prop-types';
export default class Botaozudo extends React.Component {
static propTypes = {
// Custom style for Botaozudo. Requires object
componentStyle: PropTypes.object,
};
static defaultProps = {
componentStyle: styles,
};
render() {
const { titulo, event, componentStyle } = this.props;
return (
<TouchableOpacity style={componentStyle.newBtn} onPress={() => event()}>
<Text style={styles.txtButton}>{titulo}</Text>
</TouchableOpacity>
);
}
}
const styles = StyleSheet.create({
btnAlinhar: {
alignItems: 'flex-end',
marginRight: 20,
paddingTop: 7,
},
button: {
backgroundColor: '#a082c9',
width: 100,
height: 40,
borderRadius: 10,
},
button2: {
backgroundColor: '#a082c9',
width: 300,
height: 90,
borderRadius: 10,
},
txtButton: {
color: '#fff',
fontSize: 20,
textAlign: 'center',
paddingVertical: 5,
},
});
and in App.js:
<Botaozudo
componentStyle={styles}
titulo='I am a button'
event={() =>
console.log('yup I am a button')}/>
const styles = StyleSheet.create({
newBtn: {
backgroundColor: '#7c7070',
width: 200,
height: 100
}
});