Props

Vinayj2477 — Wed, 31 Jul 2019 05:19:51 +0000

// Child Component

import React, { Component } from 'react';
import {
StyleSheet,
View,
Text,
TextInput,
TouchableOpacity
} from 'react-native';

export default class Form extends Component {
render() {
return (

underlineColorAndroid='rgba(0,0,0,0)'
placeholder="Email"
placeholderTextColor="#ffffff"
/>
underlineColorAndroid='rgba(0,0,0,0)'
placeholder="Password"
secureTextEntry={true}
placeholderTextColor="#ffffff"
/>

            <TouchableOpacity style={styles.button}>
                <Text style={styles.buttonText}> {this.props.type} </Text>
            </TouchableOpacity>
        </View>
    )
}

}

const styles = StyleSheet.create({
container: {
flexGrow: 1,
justifyContent: 'center',
alignItems: 'center'
},

inputBox: {
    width: 300,
    backgroundColor: 'rgba(255, 255,255,0.2)',
    borderRadius: 25,
    paddingHorizontal: 16,
    fontSize: 16,
    color: '#ffffff',
    marginVertical: 10
},
button: {
    width: 300,
    backgroundColor: '#1c313a',
    borderRadius: 25,
    marginVertical: 10,
    paddingVertical: 13
},
buttonText: {
    fontSize: 16,
    fontWeight: '500',
    color: '#ffffff',
    textAlign: 'center'
}

});

// Parent Component

import React, { Component } from 'react';
import {
SafeAreaView,
StyleSheet,
ScrollView,
View,
Text,
StatusBar,
} from 'react-native';

import Logo from '../components/logo';
import Form from '../components/form';

export default class LoginPage extends Component {

render() {
return (

Creat an account
SignUp

)
}
}

const styles = StyleSheet.create({
container: {
backgroundColor: '#b0bec5',
flexGrow: 1,
alignItems: 'center',
justifyContent: 'flex-end',
},
signupTextCont: {
flexGrow: 1,
alignItems: 'flex-end',
justifyContent: 'center',
paddingVertical: 16,
flexDirection: 'row'
},
signupText: {
color: 'rgba(255,255,255,0.6)',
fontSize: 16
},
signupButton: {
color: '#ffffff',
fontSize: 16,
fontWeight: '500'
},
button: {
width: 300,
backgroundColor: '#1c313a',
borderRadius: 25,
marginVertical: 10,
paddingVertical: 13
},
buttonText: {
fontSize: 16,
fontWeight: '500',
color: '#ffffff',
textAlign: 'center'
},
});

When I am trying to access {this.props.type}, I get lots of warning.

//Warning:

Warning: componentWillReceiveProps is deprecated and will be removed in the next major version. Use static getDerivedStateFromProps instead.

Warning: componentWillMount is deprecated and will be removed in the next major version. Use componentDidMount instead. As a temporary workaround, you can rename to UNSAFE_componentWillMount.

In the emulator, all the components vanish and I will be left out with an empty screen. Please let me know where I am going wrong. Thanks in advance.

componentWillReceiveProps warnings while using props.

Vinayj2477 — Wed, 31 Jul 2019 05:19:10 +0000