How to layer components properly on React Native

Question

I am trying to build an app with react native and am having some trouble in building the initial screen because I do not properly understand how to layer components on to the screen and make it all appear.

I have tried to change the code in certain portions and it either creates an error or just a portion of the screen shows up.

This is what the Screen should look like

and here is what it looks like

This is the code in the Screen JS file

class SearchScreen extends Component<Props>{
   render(){
       return (
           <LoadingImage>
               <PopDownPanel/>
           </LoadingImage>
       );    
   }

}

This is the code for the panel with search button

class PopDownPanel extends Component<Props>{
constructor(props){
    super(props);
    this.state = {taxonA: '', taxonB: ''}
}

handleTaxonA = (text) => {
    this.setState({taxonA : text})
}
handleTaxonB = (text) => {
    this.setState({taxonB : text})
}
_onPress = () => {
    alert("Taxon A: "+ this.state.taxonA + "\n" + "Taxon B: " + this.state.taxonB);
}
render(){
    return(
        <Animatable.View
            animation = 'fadeOutRight'
            delay = {5000}
        >
            <View style = {styles.panel}/>
                <View style = {styles.boxA}>
                    <TextInput
                        fontSize = {15}
                        placeholder = 'Taxon A...'
                        onChangeText = {this.handleTaxonA}
                        style = {styles.words}
                    />
                </View>
                <View style = {styles.boxB}>
                    <TextInput
                        placeholder = 'Taxon B...'
                        onChangeText = {this.handleTaxonB}
                        style = {styles.words}
                    />
                </View>
                <TouchableOpacity
                    style = {styles.searchButton}
                    onPress = {this._onPress}
                >
                    <Text style = {styles.words}>Search</Text>
                </TouchableOpacity>
        </Animatable.View>
    );
}

}

This is the code for the background image

class LoadingImage extends Component<Props>{
constructor(props){
    super(props);
    this.state = {ready: false};
}

render(){
    return (
        <ImageBackground
            source = {require('../assets/images/TimeTreeSearch.png')}
            style = {{width: '100%', height: '100%'}}
            imageStyle = {{resizeMode: 'contain'}}
        >
            <Animatable.Image
                source = {require('../assets/images/TimeTree_Gray.png')}
                animation = 'fadeOut'
                iterationCount = {1}
                useNativeDriver = {true}
                style = {{height: '100%', width: '100%'}}
                resizeMode = 'contain'
                easing = 'ease-in-out'
            />
        </ImageBackground>
    );
}

}

score 1 · Accepted Answer · answered Jun 10 '19 at 16:13

Your LoadingImage component does not render children. Anything that you nest within that component, such as the PopDownPanel in your case, will be passed down via props and accessible by this.props.children.

For example:

class ComponentWithChildren extends Component {
  render() {
    return (
      <View>
        {this.props.children}
      </View>
    )
  }
}

How to layer components properly on React Native

1 Answers1