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';

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.

React Navigation header not visible when using Drawer Navigation

Below is my code which uses drawer navigation. But header given on HomeScreen disappears and is not visible.
I am only using drawer navigation and no nesting of navigation is going on.
App.js file -
import React, { Component } from "react";
import { Platform, StyleSheet, Text, View } from "react-native";
import MyApp from "./src/router/router";
export default class App extends Component {
render() {
return <MyApp />;
}
}
router.js file -
import {
createDrawerNavigator,
createAppContainer
} from "react-navigation";
import Sidebar from "../components/Sidebar/Sidebar";
import HomeScreen from "../components/HomeScreen/HomeScreen";
const MyDrawerNavigator = createDrawerNavigator(
{
Home: {
screen: HomeScreen
}
},
{
contentComponent: Sidebar,
drawerWidth: 200,
}
);
const App = createAppContainer(MyDrawerNavigator);
export default App;
HomeScreen.js file -
import React, { Component } from "react";
import {
Text,
View,
ScrollView,
TextInput,
TouchableOpacity,
Image
} from "react-native";
import { Calendar } from "react-native-calendars";
import ham from "../../assets/images/ham.png";
export default class HomeScreen extends Component {
static navigationOptions = {
drawerLabel: "Maruti Hotel Management",
headerStyle: {
backgroundColor: "#ED5A6C"
},
headerTintColor: "#fff",
headerTitleStyle: {
fontWeight: "bold",
flex: 1,
textAlign: "center"
}
};
state = {
markedDate: {}
};
dateSelectHandler = date => {
let selectedDate = date.dateString;
this.setState({
markedDate: {
[selectedDate]: {
selected: true,
marked: true,
selectedColor: "#ED5A6C"
}
}
});
};
render() {
return (
<ScrollView style={{ flex: 1 }}>
<Calendar
style={{ flex: 1 }}
// Initially visible month. Default = Date()
onDayPress={day => {
console.log(day);
this.dateSelectHandler(day);
}}
markedDates={this.state.markedDate}
theme={{
"stylesheet.calendar.header": {
week: {
marginTop: 5,
flexDirection: "row",
justifyContent: "space-around",
backgroundColor: "#ED5A6C",
color: "red"
},
dayHeader: {
marginTop: 2,
marginBottom: 7,
width: 32,
textAlign: "center",
color: "#fff"
}
},
calendarBackground: "#F5A5AE",
arrowColor: "#ED5A6C",
monthTextColor: "#ED5A6C",
dayTextColor: "#ED5A6C",
todayTextColor: "blue"
}}
/>
<View
style={{
flex: 1,
backgroundColor: "#F07886",
alignItems: "center",
paddingTop: "2%",
paddingBottom: "10%"
}}
>
<Text
style={{
textAlign: "center",
color: "#FFF",
fontWeight: "500",
fontSize: 17
}}
>
Total Income (गल्ला)
</Text>
<TextInput
style={{
borderBottomColor: "#fff",
borderBottomWidth: 1,
paddingRight: "3%",
paddingLeft: "3%",
marginBottom: "2%",
width: "80%"
}}
editable={true}
maxLength={40}
placeholder="Rs"
/>
<TouchableOpacity style={{ width: "80%", marginTop: "2%" }}>
<View
style={{
borderRadius: 5,
backgroundColor: "#D85263",
paddingTop: 10,
paddingBottom: 10,
// paddingLeft: 15,
// paddingRight: 15,
justifyContent: "center",
alignItems: "center"
}}
>
<Text
style={{
width: "80%",
textAlign: "center",
color: "#fff",
fontWeight: "700",
fontSize: 16,
letterSpacing: 2
}}
>
Submit
</Text>
</View>
</TouchableOpacity>
</View>
</ScrollView>
);
}
}
Please help as I am stuck and already viewed similar questions but with no luck

Use generic header component and implement it in each screen where header is required. Pass header name as prop from the screen
Header Component:
class PageHeader extends Component {
<Header>
<Left>
<Button
transparent
onPress={() => this.props.navigation.openDrawer()}
>
<Icon name="menu" />
</Button>
</Left>
<Body>
<Title>{this.props.title}</Title>
</Body>
<Right />
</Header>
}
export default PageHeader;
Sample Screen:
<Container style={styles.container}>
<PageHeader title="Home" />
<View>
// screen view
</View>
</Container>

The best way I found to use and customize headers for different screens is by using the Header component by react-native-elements. You just add the component to each screen that you want the header on. Also, dont forget to do header: null on your stackNavigator so it wont show 2 headers on the screen.
Example below:
<React.Fragment>
<Header
statusBarProps={{ barStyle: 'light-content' }}
barStyle="light-content"
leftComponent={
<SimpleIcon
name="menu"
color="#34495e"
size={20}
/>
}
centerComponent={{ text: 'HOME', style: { color: '#34495e' } }}
containerStyle={{
backgroundColor: 'white',
justifyContent: 'space-around',
}}
/>
</React.Fragment>

React-Native: Change opacity colour of ImageBackground

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

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.