sharingapples / react-native-transition Goto Github PK

import React from 'react';
import { 
  AppRegistry,
  View,
  StyleSheet,
  DatePickerAndroid,
  TextInput,
  ScrollView, 
  FlatList,
  Image,
} from 'react-native';
import { Button as IconButton } from 'react-native-elements';

import { createTransition,SlideLeft} from 'react-native-transition';

const Transition = createTransition(SlideLeft);

var ImagePicker = require('react-native-image-picker');


class SendScreen extends React.Component {
    constructor(props) {
    super(props);
      this.state = {
      avatarSource: null,
      textBttn : "Select Image"
          };
  } 

   async  _onPressButton() {
    try { 
  const {action, year, month, day} = await DatePickerAndroid.open({
    date: new Date(2020, 4, 25)
  });
  if (action !== DatePickerAndroid.dismissedAction) {
    // Selected year, month (0-11), day
  }
} catch ({code, message}) {
  console.warn('Cannot open date picker', message);
}
  } 

switch = () => {
    Transition.show(
     <View style={{flex: 1,backgroundColor: '#ffffff'}}>
      <View style={{flex: 1,margin: 15,backgroundColor: '#ffffff'}}>
      <Text style={{fontSize: 20,fontWeight: 'bold',marginTop: 8,marginBottom: 20}}> Pickup & Drop Locations </Text>
       <Item regular style={{margin: 10,elevation: 1,height:50,marginRight: 0,shadowColor: '#000000',
    shadowOffset: {
      width: 0,
      height: 3
    },
    shadowRadius: 4,
    shadowOpacity: 1.0}}>
            <Input placeholder='FROM: CITY OR COUNTRY' style={{fontSize: 14}}onChangeText={(text) => this.setState({text})}
        />
          </Item>
      <Item regular style={{margin: 10,elevation: 1,height:50,marginRight: 0,shadowColor: '#000000',
    shadowOffset: {
      width: 0,
      height: 3
    },
    shadowRadius: 4,
    shadowOpacity: 0.1}}>
            <Input placeholder='TO: CITY OR COUNTRY' style={{fontSize: 14}}onChangeText={(text) => this.setState({text})}
        />
          </Item>
     
   <IconButton
          
          icon={{name: "date-range", size: 32}}
          buttonStyle={{backgroundColor: "#397af8", borderRadius: 8, margin: 15}}
          textStyle={{textAlign: 'center'}}
          title={`ENTER DATE`}
          onPress={this._onPressButton}/>

     <View style={{width: 300,
height: 50,position: 'absolute',
bottom: 10,
right: 10}}>     
     <IconButton
          
          icon={{name: "arrow-forward", size: 32}}
          buttonStyle={{
borderRadius: 30,
backgroundColor: '#ee6e73',
}}
          textStyle={{textAlign: 'center'}}
          title={`NEXT`}
          iconRight={true}
          onPress={this.switch}
/>
</View>
          </View>
          </View>

    );
  }

  _selectImage() {

    var options = {
  title: 'Select Image',
  storageOptions: {
    skipBackup: true,
    path: 'images'
  }
  };
  ImagePicker.showImagePicker(options, (response) => {
  console.log('Response = ', response);

  if (response.didCancel) {
    console.log('User cancelled image picker');
  }
  else if (response.error) {
    console.log('ImagePicker Error: ', response.error);
  }
  else {
     let source = { uri: 'data:image/jpeg;base64,' + response.data };

    this.setState({
      avatarSource: source,
      textBttn: "Selected"
    });
  console.log("state = "+this.state.avatarSource);
  console.log("state = "+this.state.textBttn);
  }
});
  }

  static navigationOptions = {
    title: 'SEND ANYTHING ANYWHERE'
  };
 
  render() {
    return (
      
      <View style={{flex: 1,backgroundColor: '#ffffff'}}>
      <Transition>
<View style={{flex: 1,margin: 15,backgroundColor: '#ffffff',}}>
      <Text style={{fontSize: 20,fontWeight: 'bold',marginTop: 10,marginBottom: 20}}> Details of Package </Text>
      { this.state.avatarSource === null ?  
        <IconButton  
          icon={{name: "photo-camera", size: 32}}
          buttonStyle={{backgroundColor: "#397af8", borderRadius: 2,marginLeft: 50,height: 50, width: 200}}
          textStyle={{textAlign: 'center',color: "#000000"}}
          title={this.state.textBttn}
          onPress={() => this._selectImage()}/> : <Image style={styles.avatar} source={this.state.avatarSource} />
          }
   
          
           <View style={{width: 300,
height: 50,position: 'absolute',
bottom: 10,
right: 10}}>     
     <IconButton
          
          icon={{name: "arrow-forward", size: 32}}
          buttonStyle={{
borderRadius: 30,
backgroundColor: '#ee6e73',
}}
          textStyle={{textAlign: 'center'}}
          title={`NEXT`}
          iconRight={true}
          onPress={this.switch}
/>
</View>
 </View>
 </Transition>
          </View>

     );


  }
}

  <Transition duration={300} easing={Easing.ease}>
    <Text>I don't render :(</Text>
  </Transition>
</ScrollView>