Develop Reference

Custom components does not work in React Native

I am new to react native and trying to make a small user input form, but my code does not work well.
I made a class that will create label and text input, but style does not work for my class, Form1. The class in the same file App.js worked, but importing from another js file did not.
Can someone help me to figure out the solution and why it happens?
App.js
import React, { useState } from 'react';
import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, View, Button, TextInput } from 'react-native';
import Form1 from './Parts/Form1';
export default function App() {
const [name, setName] = useState('Haruku');
const [age, setAge] = useState('30');
return (
<View style={styles.container}>
<StatusBar style="auto" />
<View>
<Text style={styles.centerBox} borderWidth="1">Enter name: </Text>
<TextInput
style={styles.input}
placeholder='Example'
onChangeText={(val) => setName(val)} />
<Form1 />
<Text>name: {name}, age: {age}</Text>
</View>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
input: {
borderWidth: 1,
borderColor: '#777',
alignItems: 'center',
justifyContent: 'center',
padding: 8,
margin: 10,
width: 200,
},
centerBox: {
alignSelf: 'center',
textAlign: 'center',
borderWidth: 1,
width: 150,
},
buttonContainer: {
marginTop: 20,
backgroundColor: "#0000FF",
},
});
Form1.js
import React from 'react';
import { StyleSheet, Text, View,TextInput } from 'react-native';
class Form1 extends React.Component {
render() {
return (
<View>
<Text style={styles2.centerBox}>Age: </Text>
<TextInput style={styles2.input} placeholder='Example' />
</View>
)
}
}
const styles2 = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
input: {
borderWidth: 1,
borderColor: '#777',
alignItems: 'center',
justifyContent: 'center',
padding: 8,
margin: 10,
width: 200,
placeholder: "Ex",
},
centerBox: {
alignSelf: 'center',
textAlign: 'center',
alignItems: 'center',
},
});
export default Form1;

We should import the React when we are creating any component that returns JSX.
Have a try by adding the below import statement on the top of the Form1.js
import React from 'react';

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;

Which component should I use class or functional?

I'm trying to use react-native-camera and I want to send tokens from the first page to the camera page.
how can I get a token on the camera page? I am not sure how to solve this problem, I tried to change the camera page to function based component but I get more errors :) so I'd be very happy if you guys help me out
the first page is function-based component
import React from 'react';
import {View, Text, TouchableOpacity, ActivityIndicator} from 'react-native';
const first = () => {
const token = '12345678';
return (
<View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
{isData?(
<TouchableOpacity
onPress={() => {
navigation.navigate('cameraV2', {token:token});
}}
style={{
height: 50,
width: '80%',
backgroundColor: '#f45f00',
alignItems: 'center',
justifyContent: 'center',
}}>
<Text style={{fontWeight: 'bold', fontSize: 18}}>
Giriş için tıklayın
</Text>
</TouchableOpacity>
):(
<ActivityIndicator size='large' color='#0f0' />
)}
</View>
);
};
export default first;
camera page is class based component
import React, {Component} from 'react';
import {Button, Text, View} from 'react-native';
import {RNCamera} from 'react-native-camera';
class cameraV2 extends Component {
navigation = this.props.navigation;
constructor(props) {
super(props);
this.camera = null;
this.barcodeCodes = [];
this.state = {
token:this.navigation.token,
is_camera: 0,
is_loading: 0,
barcodes: [],
camera: {
type: RNCamera.Constants.Type.back,
flashMode: RNCamera.Constants.FlashMode.auto,
},
};
}
barcodeRecognized = ({barcodes}) => {
barcodes.forEach(barcode => {
if(barcode.type!=='UNKNOWN_FORMAT'){
console.log(barcode.data)
this.setState({barcodes});
}
});
};
render() {
return (
<View style={styles.container}>
<RNCamera
ref={ref => {
this.camera = ref;
}}
defaultTouchToFocus
flashMode={this.state.camera.flashMode}
mirrorImage={false}
//onBarCodeRead={this.onBarCodeRead.bind(this)}
onGoogleVisionBarcodesDetected={this.barcodeRecognized}
onFocusChanged={() => {}}
onZoomChanged={() => {}}
permissionDialogTitle={'Permission to use camera'}
permissionDialogMessage={
'We need your permission to use your camera phone'
}
style={styles.preview}
type={this.state.camera.type}
/>
<View style={[styles.overlay, styles.topOverlay]}>
<Text style={styles.scanScreenMessage}>Please scan the barcode.</Text>
<Text style={styles.scanScreenMessage}>token: {this.state.token} </Text>
</View>
<View style={[styles.overlay, styles.bottomOverlay]}>
<Button
onPress={() =>
this.navigation.navigate('second', {
barcode: this.state.barcodes,
token: token,
})
}
style={styles.enterBarcodeManualButton}
title="Enter Barcode"
/>
</View>
</View>
);
}
}
const styles = {
container: {
flex: 1,
},
preview: {
flex: 1,
justifyContent: 'flex-end',
alignItems: 'center',
},
overlay: {
position: 'absolute',
padding: 16,
right: 0,
left: 0,
alignItems: 'center',
},
topOverlay: {
top: 0,
flex: 1,
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center',
},
bottomOverlay: {
bottom: 0,
backgroundColor: 'rgba(0,0,0,0.4)',
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center',
},
enterBarcodeManualButton: {
padding: 15,
backgroundColor: 'white',
borderRadius: 40,
},
scanScreenMessage: {
fontSize: 14,
color: 'white',
textAlign: 'center',
alignItems: 'center',
justifyContent: 'center',
},
};
export default cameraV2;

You just need to initialise the state with token value from route params obtained from props instead of navigation
this.state = {
token: this.props.route.params.token,
is_camera: 0,
is_loading: 0,
barcodes: [],
camera: {
type: RNCamera.Constants.Type.back,
flashMode: RNCamera.Constants.FlashMode.auto,
},
};
}
P.S You do not need to convert the entire component to functional
component just for using params

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;

React-native onpress into touchable open another model

i have this model into react native that name LoginView.js
"use strict";
import React, { Component } from 'react';
import { AppRegistry,TouchableOpacity, Text ,Button,Image,TextInput,PropTypes,StyleSheet,View,NavigatorIOS,TouchableHighlight} from 'react-native';
class LoginView extends Component {
render() {
return (
<View style={styles.container}>
<Text style={styles.title}>
HYGEX
</Text>
<View>
<TextInput
placeholder="Username"
style={styles.formInput}
/>
<TextInput
placeholder="Password"
secureTextEntry={true}
style={styles.formInput1}
/>
<TouchableHighlight style={styles.button}
onPress={() => this.move()}>
<Text style={styles.buttonText}>Login</Text>
</TouchableHighlight>
</View>
</View>
);
}
move() {
//here !!
}
}
var styles = StyleSheet.create({
container: {
padding: 30,
marginTop: 65,
alignItems: "stretch"
},
title: {
fontSize: 18,
marginBottom: 10
},
formInput: {
height: 36,
padding: 10,
marginRight: 5,
marginBottom: 5,
marginTop: 5,
flex: 1,
fontSize: 18,
borderWidth: 1,
borderColor: "#555555",
borderRadius: 8,
color: "#555555"
},
button: {
height: 36,
flex: 1,
backgroundColor: "#555555",
borderColor: "#555555",
borderWidth: 1,
borderRadius: 8,
marginTop: 10,
justifyContent: "center"
},
buttonText: {
fontSize: 18,
color: "#ffffff",
alignSelf: "center"
},
});
module.exports = LoginView;
in this module i have method called move, when click into touchable move must open this module that name test.js
import React, { Component } from 'react';
import { AppRegistry, Text } from 'react-native';
class HelloWorldApp extends Component {
render() {
return (
<Text>Hello world!</Text>
);
}
}
i need this method in project its very important for me , if any one can tell me how to do this please !!
Note : iam beginner into react-native :)
Edit
i tried this code
login.js
"use strict";
import React, { Component } from 'react';
import { AppRegistry,TouchableOpacity, Text ,Button,Image,TextInput,PropTypes,StyleSheet,View,NavigatorIOS,TouchableHighlight} from 'react-native';
class LoginView extends Component {
render() {
return (
<View style={styles.container}>
<Text style={styles.title}>
HYGEX
</Text>
<View>
<TextInput
placeholder="Username"
style={styles.formInput}
/>
<TextInput
placeholder="Password"
secureTextEntry={true}
style={styles.formInput1}
/>
<TouchableHighlight style={styles.button}
onPress={() => this.OnBUttonPress()}>
<Text style={styles.buttonText}>Login</Text>
</TouchableHighlight>
</View>
</View>
);
}
OnBUttonPress = () => {
this.props.navigator.push({
id: 'test'
})
}
}
var styles = StyleSheet.create({
container: {
padding: 30,
marginTop: 65,
alignItems: "stretch"
},
title: {
fontSize: 18,
marginBottom: 10
},
formInput: {
height: 36,
padding: 10,
marginRight: 5,
marginBottom: 5,
marginTop: 5,
flex: 1,
fontSize: 18,
borderWidth: 1,
borderColor: "#555555",
borderRadius: 8,
color: "#555555"
},
button: {
height: 36,
flex: 1,
backgroundColor: "#555555",
borderColor: "#555555",
borderWidth: 1,
borderRadius: 8,
marginTop: 10,
justifyContent: "center"
},
buttonText: {
fontSize: 18,
color: "#ffffff",
alignSelf: "center"
},
});
module.exports = LoginView;
AppRegistry.registerComponent('AwesomeProject', () => LoginView);
and this test.js
import React, { Component } from 'react';
import {
View,
Text,
TouchableHighlight,
} from 'react-native';
export default class WelcomeScreen extends Component {
constructor(props) {
super(props);
this.state = {
text: '<Your welcome in Second Screen>',
textBack: '<Tap to Go Back to First Screen>'
}
}
OnBUttonPress = () => {
this.props.navigator.push({
id: 'WelcomeScreen'
})
}
render = () => {
return (
<View>
<Text>{this.state.text}</Text>
<TouchableHighlight onPress={this.OnBUttonPress}>
<Text>{this.state.textBack}</Text>
</TouchableHighlight>
</View>
);
}
}
i got this error
undefined is not an object (evaluating'_this.props.navigator.push)

i have created a solution for multiple screen. so please read my code and implement as your requirement hope it will help you. Link here:
Navigator sample
if get any problem please ask me.