modal_view_transition_animeted

import React, { Component, useState, useEffect, useRef } from 'react';
import { View, Text, StyleSheet, TouchableHighlight, Animated, Button, Alert, TouchableOpacity, Image, FlatList, Dimensions} from 'react-native';

function Schema0 (props){
  //const [doAnimation, setDoAnimation] = useState(false);
  const [forma_pagamento, setforma_pagamento] = useState(0);

  function handleAdd(valor) {
    //console.log('aqui é o log do handle '+valor+' e '+forma_pagamento)
    props.onSubmit({valor:valor.valor,escolha:valor.pagamento})
    setforma_pagamento(forma_pagamento == valor.valor ? !forma_pagamento : valor.valor)
  }

 // <TouchableOpacity style={styles.head_toucha_left} onPress={() => {  }}>
 // <Image style={styles.head_icon_left} source={require('../asse/arrow_left.png')} />
 //</TouchableOpacity>

  return(
    <View style={styles.container}>
    <View style={styles.head}>
      <View style={styles.head_button_left}>
  
      </View>
      <View style={styles.head_view_center}><Text style={styles.head_text_center}>Forma de Pag 1</Text></View>
      <View style={styles.head_button_right}>
        <TouchableOpacity style={styles.head_toucha_left} onPress={() => { props.onClose(false) }}>
         <Image style={styles.head_icon_left} source={require('../asse/arrow_left.png')} />
        </TouchableOpacity>
      </View>
    </View>
    <View style={styles.content}>

      <View style={styles.content_view_valor}>
        <Text>ff</Text>
      </View>

      <View style={styles.content_formas_pagamento}>
        <FlatList
          data={[
            {key: 1, id: 11, type: 'Dinheiro', icon:'cartao.png', active: false, child: 0 },
            {key: 2, id: 12, type: 'Cartao', icon:'cartao.png', active: false, child: 1 },
            {key: 6, id: 16, type: 'Digital', icon:'money.png', active: false, child: 4 },
            {key: 3, id: 13, type: 'Boleto', icon:'money.png', active: false, child: 2 },
            {key: 4, id: 14, type: 'Voucher', icon:'money.png', active: false, child: 3 },
            {key: 5, id: 15, type: 'Troca', icon:'money.png', active: false, child: 4 },
          ]}
          renderItem={({item}) =>
          <TouchableOpacity onPress={() => { handleAdd({valor:item.id,pagamento:item.type}) }}>
           <View style={item.id == forma_pagamento ? styles.content_item_active : styles.content_item }>
             <Image style={item.id == forma_pagamento ? styles.content_item_icon_active : styles.content_item_icon} source={require('../asse/cartao.png')} />
            <Text style={styles.content_item_text}>{item.type}</Text>
           </View>
          </TouchableOpacity>
          }
          //keyExtractor={(item, index) => index.toString()}
          numColumns={3}
          //keyExtractor={(item) => item.key}
          //columnWrapperStyle={styles.content_row}
          //{id:{item.key},escolha:2}
          //depois arrumar o onpress do touchableopacity
          />


      </View>
      
    </View>
     <View style={styles.footer}>
       <View style={styles.footer_col1}>
        <Button title="testar" onPress={() => props.onClick() }/>
       </View>
       <View style={styles.footer_col2}>
        <Button title="Concluir"  disabled={forma_pagamento == 11 ? false : true} onPress={() => Alert.alert('Pagamento processado com sucesso')}/>
       </View>
       </View>
   </View>
  );

}

function Schema1 (props){
  //const [doAnimation, setDoAnimation] = useState(false);
  const [forma_pagamento, setforma_pagamento] = useState(0);

  function handleAdd(valor) {
    console.log('aqui é o log do handle '+valor+' e '+forma_pagamento)
    props.onSubmit({valor:0,escolha:'tela2'})
    //setforma_pagamento(forma_pagamento == valor.valor ? !forma_pagamento : valor.valor)
  }

  function return_view() {
    props.onReturn({escolha:view2})
    console.log('abriu o botao voltar')
  }


  return(
    <View style={styles.container}>
    <View style={styles.head_}>
      <View style={styles.head_button_left_}>
        <TouchableOpacity style={styles.head_toucha_left_} onPress={() => { console.log('abrindo2') }}>
         <Image style={styles.head_icon_left_} source={require('../asse/arrow_left.png')} />
        
        </TouchableOpacity>
      </View>
      <View style={styles.head_view_center}><Text style={styles.head_text_center}>Forma de Pag 2</Text></View>
      <View style={styles.head_button_right}>
        <TouchableOpacity style={styles.head_toucha_left} onPress={() => { props.onClose(false) }}>
         <Image style={styles.head_icon_left} source={require('../asse/arrow_left.png')} />
        </TouchableOpacity>
      </View>
    </View>
    <View style={styles.content}>

      <View style={styles.content_view_valor}>
        <Text>ff</Text>
      </View>

      <View style={styles.content_formas_pagamento}>
        <Text>segunda tela</Text>
        <TouchableOpacity style={styles.head_toucha_left} onPress={() => { handleAdd() }}>
         <Image style={styles.head_icon_left} source={require('../asse/arrow_left.png')} />
         <Text>hh44466</Text>
        </TouchableOpacity>
      </View>
      
    </View>
     <View style={styles.footer}>
       <View style={styles.footer_col1}>
        <Text>fbbbnnnnn2</Text>
       </View>
       <View style={styles.footer_col2}>
        <Button title="Concluir"  disabled={forma_pagamento == 11 ? false : true} onPress={() => Alert.alert('Simple Button pressed')}/></View>
       </View>
   </View>
  );

}

function Schema2 (props){
  //const [doAnimation, setDoAnimation] = useState(false);
  const [forma_pagamento, setforma_pagamento] = useState(0);

  function handleAdd(valor) {
    console.log('aqui é o log do handle '+valor+' e '+forma_pagamento)
    props.onSubmit({valor:valor.valor,escolha:valor.pagamento})
    setforma_pagamento(forma_pagamento == valor.valor ? !forma_pagamento : valor.valor)
  }

  function return_view() {
    props.onReturn({escolha:view2})
  }

  function fecha_modal() {
    props.onClose(false)
  }

  return(
    <View style={styles.container}>
    <View style={styles.head}>
      <View style={styles.head_button_left_}>
        <TouchableOpacity style={styles.head_toucha_left_} onPress={() => { console.log('abrindo o link') }}>
         <Image style={styles.head_icon_left_} source={require('../asse/arrow_left.png')} />
         <Text>hh5444</Text>
        </TouchableOpacity>
      </View>
      <View style={styles.head_view_center}><Text style={styles.head_text_center}>Forma de Pag 3</Text></View>
      <View style={styles.head_button_right}>
        <TouchableOpacity style={styles.head_toucha_left} onPress={() => { fecha_modal() }}>
         <Image style={styles.head_icon_left} source={require('../asse/arrow_left.png')} />
        </TouchableOpacity>
      </View>
    </View>
    <View style={styles.content}>

      <View style={styles.content_view_valor}>
        <Text>ff</Text>
      </View>

      <View style={styles.content_formas_pagamento}>
        <Text>terceira tela</Text>
      </View>
      
    </View>
     <View style={styles.footer}>
       <View style={styles.footer_col1}>
        <Text>ffjj888---3</Text>
       </View>
       <View style={styles.footer_col2}>
        <Button title="Concluir"  disabled={forma_pagamento == 11 ? false : true} onPress={() => Alert.alert('Simple Button pressed')}/></View>
       </View>
   </View>
  );

}


//style={{display: 'none'}} 

const Counter = (props) => {

  const [doAnimation, setDoAnimation] = useState(new Animated.Value(0));

  function onSubmit(formState) {
    console.log('I will submit my ChildForm Input State: ' + formState.valor+' escolha: '+formState.escolha);
    //setDoAnimation(!doAnimation)
    if(formState.escolha == 'Cartao'){
      naveg_sign (view1);
    }

    if(formState.escolha == 'tela2'){
      naveg_sign (view2);
    }

  }

  function onReturn(formState) {
    console.log('boltou para a view: ' + formState.valor+' escolha: '+formState.escolha);
    //setDoAnimation(!doAnimation)
    naveg_singout (formState);
  }

  function fecha_modal() {
    props.close_modal_(false)
  }

//----

const [view1] = useState(() => new Animated.Value(0));
const [view2] = useState(() => new Animated.Value(0));
const [view3] = useState(() => new Animated.Value(0));



function naveg_sign (view) {
  return Animated.parallel([
    Animated.timing(view, {
      toValue: 1,
      duration: 500,
      useNativeDriver: true,
    })
  ]).start();
}

function naveg_singout (view) {
  const view_array = [view];
    return Animated.parallel([
      Animated.timing(view, {
        toValue: 0,
        duration: 500,
        useNativeDriver: true
      })
    ]).start();
}

function naveg_singout_all () {
    return Animated.parallel([
      Animated.timing(view1, {
        toValue: 0,
        duration: 500,
        useNativeDriver: true
      }),
      Animated.timing(view2, {
        toValue: 0,
        duration: 500,
        useNativeDriver: true
      }),
      Animated.timing(view3, {
        toValue: 0,
        duration: 500,
        useNativeDriver: true
      })
    ]).start();
}


//--------------
//const [animation] = useState(() => new Animated.Value(0));
//const { height } = Dimensions.get("window");


function abre_modal(){
  Animated.spring(animation, {
    toValue: 1,
  }).start();
}


   return (
      <View>
        <Schema0 name_line={props.name} onSubmit={onSubmit} onClose={fecha_modal} onClick={abre_modal}></Schema0>
       <Animated.View
            style={{
            transform: [
              {
                translateX: view1.interpolate({
                  inputRange: [0, 1],
                  outputRange: [600, 0]
                })
              }
            ],
          }}
        >
        <Schema1 name_line={props.name} onReturn={onReturn} onSubmit={onSubmit}></Schema1>
       </Animated.View>
       <Animated.View
            style={{
            transform: [
              {
                translateX: view2.interpolate({
                  inputRange: [0, 1],
                  outputRange: [600, 0]
                })
              }
            ],
          }}
        >
         <Schema2 name_line={props.name} onReturn={onReturn} onSubmit={onSubmit}></Schema2>
        </Animated.View>


      </View>

   );
 };

 //<AnimatedComponent doAnimation={doAnimation}>
 //</AnimatedComponent>

 const styles = StyleSheet.create({
   //configuracao
  container: {
 
    
   backgroundColor: '#fff',
   width: 330,
   height: 350,
   borderRadius: 7.5,
   borderWidth:1,
   borderColor:'#393e46',
   //flexDirection: 'column',
  },
  head: {
   justifyContent: 'space-between',
   flexDirection: 'row',
   borderTopLeftRadius: 7.5, 
   borderTopRightRadius: 7.5,
   backgroundColor: '#84a9ac',
   height: 45,
   borderBottomColor: '#222831',
   borderBottomWidth: 1,
  },
    head_view_center: {
      justifyContent: 'center',
      alignItems: 'center',
    },
      head_text_center: {
        fontSize: 18,
        //fontWeight: 'bold',
        //display: 'none',
      },
    head_button_left: {
      justifyContent: 'center',
      alignItems: 'center',
      borderTopLeftRadius: 7.5,
      width: '15%',
      backgroundColor: '#ff4',
    },
      head_toucha_left:{
        //display: 'none',
      },
      head_icon_left:{
        //display: 'none',
      },
    head_button_right: {
      justifyContent: 'center',
      alignItems: 'center',
      borderTopRightRadius: 7.5,
      width: '15%',
      backgroundColor: '#ff4',
    },


    head_: {
      justifyContent: 'space-between',
      flexDirection: 'row',
      borderTopLeftRadius: 7.5, 
      borderTopRightRadius: 7.5,
      backgroundColor: '#1647',
      height: 45,
      borderBottomColor: '#222831',
      borderBottomWidth: 1,
     },

    head_button_left_: {
      justifyContent: 'center',
      alignItems: 'center',
      borderTopLeftRadius: 7.5,
      width: '15%',
      backgroundColor: '#f64',
    },
      head_toucha_left_:{
        //display: 'none',
      },
      head_icon_left_:{
        //display: 'none',
      },



  // corpo do modal
  content:{

  },
    content_view_valor:{
      backgroundColor: '#84a9ac',
      height: 40,
      display:'none',
    },
    content_formas_pagamento:{
      alignItems: 'center',
      backgroundColor: '#83ac',
      height:'80%',
      
    },

    content_item: {
      height: 85,
      width: 85,
      backgroundColor: '#8ccbbe',
      margin: 8,
      alignItems: 'center',
      borderRadius: 7,
      borderWidth:1,
      borderColor:'#eeeeee',
    },
    content_item_active: {
      height: 85,
      width: 85,
      backgroundColor: '#29ac',
      margin: 8,
      alignItems: 'center',
      borderRadius: 7,
      borderWidth:2,
      borderColor:'#12e557',
    },
      content_item_icon:{
        height:'70%',
        width: '80%',
        opacity: 0.5,
      },
      content_item_icon_active:{
        height:'70%',
        width: '80%',
      },
      content_item_text:{
        color: '#f0f0f0',
        fontSize:15,
      },


  footer: {
    position: 'absolute',
    bottom:0,
    width:'100%',
    alignItems: 'center',
    justifyContent: 'center',
    borderBottomLeftRadius: 7.5, 
    borderBottomRightRadius: 7.5,
    backgroundColor: '#84a9ac',
    height: 45,
    borderTopColor: '#222831',
    borderTopWidth: 1,
    flexDirection: 'row',

   },
   footer_col1: {
    alignItems: 'flex-start',


    backgroundColor: '#8fac',
    width: '30%',
    height:'100%',
   },
   footer_col2: {
    backgroundColor: '#84ac',
    width: '60%',
    height:'100%',
   },
   footer_button: {
     width:10,
     height:20,
     borderRadius: 5,
   },
   footer_button_free: {

   },
   footer_button_disabled: {

   },
})

export default Counter;