BunglonReactApp.js

///single app of react-native
/// using this mockup https://dribbble.com/shots/6851798-Bunglon-Animal-Conservation-Mini-App-on-Wechat/attachments as inspiration.
/// please enjoy, maybe I Will update this


import React, { Component } from 'react';
import {View, TouchableHighlight,ScrollView, Text, Dimensions, Image, FlatList,ImageBackground, Platform, Modal} from 'react-native';

class Logger extends Component{
  render(){
    return(
    <View style={{height:120 , width:Dimensions.get('window').width}}>
     <Image
      style={{height:200,  width:Dimensions.get('window').width}}
      source={{
        uri:"https://www.gannett-cdn.com/-mm-/487e45eb3deb72e80a2e8854ede1c881d56bcfcb/c=0-105-2125-1306/local/-/media/2018/03/13/USATODAY/USATODAY/636565439512580964-GettyImages-500798391.jpg"}}
      />
    </View>);
  }
}

class Title extends Component{
  
   constructor(props){
      super(props);
   }
  
   render(){
     /// text =(this.props.title===undefined||this.props.title==null)?"INVALID":this.props.title;
     
     return(   <View style={{width:Dimensions.get('window').width, height:100}}>
            
              <Text style={{color:"white", fontSize:20, fontWeight:"bold", marginLeft:30, marginTop:70}}>
               {this.props.title}
              </Text>
        </View>
     );
   }
}

class ButtonSelection extends Comment{

  render(){
    return(
      <Modal
      animationType="slide"
      transparent={false}
      visible={this.state.modalVisible}
      onRequestClose={() => {
        Alert.alert('Modal has been closed.');
      }}>


      <View style={{backgroundColor:"white", width:Dimensions.get('window').width, 
                    height:Dimensions.get('window').height}}>
      </View>
      
      
      
      </Modal>
    );
  }
}



class ButtonElement extends Component{

  render(){
  return (
   
    <View style={{width:80, height:80, borderRadius:40,alignItems:"center",justifyContent:"center" ,backgroundColor:"purple"}}>
      <Text style={{fontWeight:"bold", color:"white"}}>image aqui</Text>
    </View>
  );
  }
}

 

class ButtonList extends Component
{

   render(){
      return (
          <View style={{height:100, width:Dimensions.get('window').width, marginTop:10,  }}>
                     
                     <FlatList
                     showsHorizontalScrollIndicator={false}
                     horizontal={true}
                        data={[
                            {title: 'Title Text', key: 'item1'},
                            {title: 'Title Text', key: 'item2'},
                            {title: 'Title Text', key: 'item3'},
                            {title: 'Title Text', key: 'item4'},
                            {title: 'Title Text', key: 'item5'},
                            {title: 'Title Text', key: 'item6'},
                          
                          ]}
                        renderItem={({item, index, separators}) => (
                          <TouchableHighlight style={{ marginLeft:5, marginRight:5, alignItems:"center", justifyContent:"center"}}>
                            <ButtonElement />
                          </TouchableHighlight>
                        )}
                      />
                                
           
          

          </View>
      );
   }
}


class Subtitle extends Component{


  constructor(props){
    super(props);
 }

 render(){
   /// text =(this.props.title===undefined||this.props.title==null)?"INVALID":this.props.title;
   
   return(   <View style={{width:Dimensions.get('window').width, height:64,  }}>
          
            <Text style={{color:"white", fontSize:25, fontWeight:"bold", marginLeft:30,}}>
             {this.props.title}
            </Text>
      </View>
   );
 }


}


class AnimalElement extends Component{

  render(){
    return(
      <View  style={{ marginLeft:10, marginRight:10,width:100, height:140, borderRadius: 30}}>
      <ImageBackground  
          style={{borderRadius:30,width:100, height:140, justifyContent:"flex-end"}} 
          source source={{
            uri:"https://www.gannett-cdn.com/-mm-/487e45eb3deb72e80a2e8854ede1c881d56bcfcb/c=0-105-2125-1306/local/-/media/2018/03/13/USATODAY/USATODAY/636565439512580964-GettyImages-500798391.jpg"}}
           >
          <Text
            style={{
              width:100,
              backgroundColor:"rgba(255,255,255,0.5)",
              color:"white",
              fontWeight:"bold"
            }}
          >Animal name</Text>

        </ImageBackground>
        </View>
    );
  }

}




class  AnimalList extends Component
{

   render(){
      return (
      
          <View style={{
                      alignItems:"center",
                       justifyContent:"center",
                       height:150, 
                       width:Dimensions.get('window').width, marginTop:10 }}>
                     
                     <FlatList
                        showsHorizontalScrollIndicator={false}
                        horizontal={true}
                        data={[
                            {title: 'Title Text', key: 'item1'},
                            {title: 'Title Text', key: 'item2'},
                            {title: 'Title Text', key: 'item3'},
                            {title: 'Title Text', key: 'item4'},
                            {title: 'Title Text', key: 'item5'},
                            {title: 'Title Text', key: 'item6'},
                          
                          ]}
                        renderItem={({item, index, separators}) => (
                          <TouchableHighlight style={{ marginLeft:5, marginRight:5, alignItems:"center", justifyContent:"center", }}>
                            <AnimalElement />
                          </TouchableHighlight>
                        )}
                      />
          </View>
      );
   }
}









class HeaderExtendes extends Component{
  render(){
 ///fix: after AnimalList ScrollView is not working.
    return (
    <ScrollView style={{
      backgroundColor: "#000055",
      width:Dimensions.get('window').width,
      height: Dimensions.get('window').height+200,
      borderTopLeftRadius:50, 
      borderTopRightRadius:50,
      marginBottom:20
    }}>

     <Title title="Reptiles "/>
     <ButtonList />
       <Subtitle title="Reptile Clasification" />
   <AnimalList />
   
   <AnimalList />
   <AnimalList />
    
    </ScrollView>)
  }


}



class App extends Component{
  

 


   render()
   {
     return (
                <View>
                   
                   <Logger/>
                  <HeaderExtendes style={{height:Dimensions.get('window').height}}/>
                   
                </View>
             );
   }
}

export default App;