sine-baixa-fidelidade-app created by Igormandello - https://repl.it/LUxN/765

sine-baixa-fidelidade-app.js

import React, { Component, PropTypes } from 'react';
import { Text, View, StyleSheet, StatusBar, Button, FlatList, TouchableHighlight, TouchableOpacity, Image, Modal } from 'react-native';
import { Constants, Notifications, Permissions } from 'expo';
import { StackNavigator, DrawerNavigator } from 'react-navigation';

const data = 
[
  { key: 'Enviar um snap', steps: 4, 
    data: 
    [
      { image: 'https://goo.gl/2dSfgV', text: 'Após posicionar a câmera, clique no botão indicado: ' }, 
      { image: 'https://goo.gl/SwmCfj', text: 'Depois, confirme a imagem clicando no icone: ' }, 
      { image: 'https://goo.gl/XqBZAt', text: 'Selecione os contatos para receberem o snap: ' }, 
      { image: 'https://goo.gl/Y24p6s', text: 'Clique no ícone indicado para enviar definitivamente o snap: ' }
    ] 
  },
  { key: 'Adicionar um amigo', steps: 2 },
  { key: 'Remover um amigo', steps: 3 },
  { key: 'Adicionar snap na história', steps: 4 },
]
              
const specials =
[
  'snap',
]
              
class FunctionList extends Component 
{
  static navigationOptions = 
  {
    header: 
    {
      visible: null,
    }
  }
  
  state = {
    modalVisible: false,
  }

  setModalVisible(visible) {
    this.setState({modalVisible: visible});
  }
  
  _renderItem = ({item}) => 
  { 
    return (
      <TouchableHighlight 
        underlayColor='#d1d1d1' 
        onPress = { () => this.props.navigation.navigate('Tutorial', { functionality: item.key, number: 1, total: item.steps, data: item.data }) } 
        style = {{marginBottom: 15}}> 
          <View style = {{ flexDirection: 'row' }}>
            <Text style= { styles.item }> 
              {'\u2022 '}
            </Text> 
            <Text style = { styles.item }>
              { this._findSpecial(item.key.split(' ')) }
            </Text> 
          </View>
      </TouchableHighlight>);
  }
  
  _findSpecial = (text) =>
  {
    var ret = []
    for (var i = 0; i < text.length; i++) 
    {
      var isSpecial = false;
      for (var n = 0; n < specials.length; n++)
        if (text[i] == specials[n])
        {
          isSpecial = true;
          break;
        }
        
      if (isSpecial)
        ret.push([<Text style = { styles.special }>{ text[i] }</Text>, ' ']);
      else
        ret.push([text[i], ' ']);
    }
    
    ret[ret.length - 1].pop();
    return ret;
  }
  
  render() {
    return (
      <View style = { styles.container }>
        <View style = { styles.header }>
          <Text style = { styles.textHeader }> Snapchat </Text>  
        </View>
        
        <View style = { styles.hr }></View>
        
        <View style = { styles.list }>
          <Text style = { styles.subtitleHeader }>Funcionalidades do app</Text>
        
          <Button
            title = 'Eae'
            backgroundColor = '#4065e8'
            onPress = { () => { this.setModalVisible(true) }}
          />
        
          <FlatList
            data = { data }
            renderItem = { this._renderItem }
            showsVerticalScrollIndicator = { true }
          />
        </View>
      </View>
    );
  }
}

class Steps extends Component 
{
  static navigationOptions = 
  {
    title: 'Voltar para a lista',
    headerStyle: 
    {
      marginTop: Constants.statusBarHeight,
      backgroundColor: '#4065e8',
    },
    headerTintColor: 'white',
  }
  
  _test = (params) =>
  {
    if (params.number / params.total != 1) 
      return 'Proximo Passo'; 
    else 
      return 'Finalizar tutorial';
  }
  
  _buttonHandler = (params, setParams, goBack) =>
  {
    if (params.number / params.total != 1) 
      setParams({ functionality: params.functionality, number: params.number + 1, total: params.total });
    else
      goBack(null);
  }
  
  render() 
  {
    const { state, setParams, goBack } = this.props.navigation;
    
    return (
      <View style={ styles2.container }>
        <View style={ styles2.header }>
          <Text 
            style = 
            {{
              fontSize: (state.params.functionality.length < 18 ? 30 : (state.params.functionality.length <= 26 ? 24 : 18)),
              fontWeight: 'bold',
              textAlign: 'center',
              paddingBottom: 6,
            }}> 
            { state.params.functionality } 
          </Text>
          <Text style={ styles2.subtitleHeader }> Passo { state.params.number } / { state.params.total } </Text>
        </View>
        
        <View style = { styles2.body }>
          <Text style = {{ paddingBottom: 15, fontSize: 22 }}> 
            { state.params.data[state.params.number - 1].text }
          </Text>
          
          <Image 
            source = {{ uri: state.params.data[state.params.number - 1].image }}
            style = {{ height: 175 }}
          />
        </View>
        
        <View style = { styles2.footer }>
          <Button
            title = { this._test(state.params) }
            backgroundColor = '#4065e8'
            onPress = { () => this._buttonHandler(state.params, setParams, goBack) }
          />
        </View>
      </View>
    );
  }
}

const Sine = StackNavigator(
{
  Index: 
  {
    screen: FunctionList,
    header: null,
    navigationOptions: 
    {
      header: null
    },
  },
  Tutorial:
  {
    screen: Steps,
  }
}, { headerMode: 'screen' },);

export default Sine;

const styles = StyleSheet.create({
  container: 
  {
    flex: 1,
    backgroundColor: '#ecf0f1',
    paddingHorizontal: 35,
    paddingTop: Constants.statusBarHeight,
  },
  
  header:
  {
    flex: 0.15,
    alignItems: 'center',
    justifyContent: 'flex-end',
    paddingBottom: 12,
  },
  
  hr:
  {
    height: 4,
    borderRadius: 2,
    backgroundColor: '#000',
  },
  
  list:
  {
    flex: 0.85,
    justifyContent: 'center',
    alignItems: 'stretch',
    paddingTop: 12,
    paddingBottom: 35,
  },
  
  textHeader:
  {
    fontSize: 52,
    fontWeight: 'bold',
    textAlign: 'center',
  },
  
  subtitleHeader:
  {
    fontSize: 26,
    fontWeight: 'bold',
    textAlign: 'center',
    paddingBottom: 24,
    paddingTop: 8,
  },
  
  item:
  {
    textAlignVertical: 'center',
    fontSize: 28,
    paddingRight: 5,
  },
  
  special: 
  {
    color: 'red',
    textDecorationLine: 'underline',
  },
});

const styles2 = StyleSheet.create({
  container: 
  {
    flex: 1,
    backgroundColor: '#ecf0f1',
    paddingHorizontal: 35,
    paddingTop: 60,
  },
  
  header:
  {
    flex: 0.08,
    alignItems: 'center',
    justifyContent: 'flex-end',
    paddingBottom: 12,
  },
  
  footer:
  {
    flex: 0.05,
    alignItems: 'stretch',
    justifyContent: 'flex-end',
    paddingBottom: 35,
  },
  
  body:
  {
    flex: 0.87,
    justifyContent: 'flex-start',
    alignItems: 'stretch',
    paddingTop: 12,
    paddingBottom: 12,
  },
  
  textHeader:
  {
    fontSize: 30,
    fontWeight: 'bold',
    textAlign: 'center',
    paddingBottom: 6,
  },
  
  textHeaderSmall:
  {
    fontSize: 22,
    fontWeight: 'bold',
    textAlign: 'center',
    paddingBottom: 6,
  },
  
  subtitleHeader:
  {
    fontSize: 22,
    textAlign: 'center',
  },
});

const StylePropType = React.PropTypes.oneOfType([
  React.PropTypes.array,
  React.PropTypes.object,
]);

const PopoverTooltipItem = ({ onPress, containerStyle, label, labelStyle }) => (
  <View style={[styles3.container, containerStyle]}>
    <TouchableOpacity onPress={onPress}>
      {
        typeof label === 'string' ?
          <Text style={[labelStyle]}>{label}</Text> :
          label()
      }
    </TouchableOpacity>
  </View>
);

PopoverTooltipItem.propTypes = {
  onPress: React.PropTypes.func.isRequired,
  label: React.PropTypes.oneOfType([
    React.PropTypes.string,
    React.PropTypes.func,
  ]).isRequired,
  containerStyle: StylePropType,
  labelStyle: StylePropType,
};

PopoverTooltipItem.defaultProps = {
  labelStyle: null,
  containerStyle: null,
};

const styles3 = StyleSheet.create({
  container: {
    padding: 10,
  },
});