Creando un App Híbrida con ReactNative

mkdir components  
touch App.js  

esto puedes hacerlo también directamente en tu editor de código ;)

import React, { Component } from 'react';  
import { View, Text, StyleSheet } from 'react-native';


class App extends Component {  
    render(){
        return(
            <View style={styles.container}>
                <Text >FixterGeek</Text>
            </View>
        );
    }
}

const styles = StyleSheet.create({  
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
    }
});

export default App;  

Podemos notar varias cosas en este pequeño componente:

Estamos importando componentes que ya tiene react-native, que funcionan para ambas plataformas (iOS y Android) desde 'react-native'

dentro de la función return de render, estamos devolviendo nuestro código Jsx con una simple View y un Text dentro (View es el equivalente genérico de un div usando react para web)

Estamos agregando estilos con el formato más utilizado de React Native el cual es en forma de objeto, no hay gran diferencia con el css tradicional solo hay que recordar que NO es css y que al ser un objeto de JS se escribe en camelCase puedes saber más aquí

Estamos utilizando FlexBox para acomodar nuestors elementos, es bueno que aprendas Flex ya que es ampliamente utilizado sobre React Native para resolver posiciones (grid)

Al final del archivo exportamos como default la clase App (esto es importante)

index.android.js

import { AppRegistry } from 'react-native';  
import FixterGeek from './components/App';

AppRegistry.registerComponent('FixterGeek', () => FixterGeek);

Notese que estamos importando la clase App que exportamos como default en App.js pero estamos nombrandole igual que nuestro proyecto creado con react-native init FixterGeek, por eso le llamamos Fixtergeek

De esta manera el método AppRegistry sigue registrando correctamente nuestra clase con el nombre de nuestro proyecto.

index.ios.js

import { AppRegistry } from 'react-native';  
import FixterGeek from './components/App';

AppRegistry.registerComponent('FixterGeek', () => FixterGeek);

react-native run-android  

y si estamos en Mac también podemos correr:

react-native run-ios  

y veríamos algo como esto:

¡Genial! lo lograste! ahora nuestras 2 apps nativas corren el mismo componente =D

Mismos componentes diferentes plataformas

vamos a agregarle una libreria bien chingona

Muchos de los temas que se abordan en la comunidad de desarrollo con react Native tienen que ver con el problema de trabajar solo código para ambas plataformas. ¿Cual es el problema?

Imagina que quieres hacer una aplicación Android con elementos de Material Design que se sienta espectacular en Android y haz puesto mucho empeño para que luzca genial, a la hora de probarla se ve perfecta en Android, pero cuando la corres en iOS, el UX no es exactamente el que un usuario iOS esperaría, es como tener una App android en iOS o puede resultar al revés; tener una app hermosa en iOs que al correr en Android no se siente como nativa de Android.

Y si queremos resolver esto pues terminamos creando una App para cada plataforma con código diferente cada una lo cual resulta en una tarea similar a crear las apps de forma nativa en Xcode y Android Studio con sus respectivas diferencias.

Por suerte Hay muchas maneras de resolver este problema, una de ellas ya viene con React Native, podemos tener 2 métodos render uno para cada plataforma y así solo preocuparnos por la lógica de nuestra aplicación separando la parte visual de cada app, pero lo dejaremos para un post futuro, ahora me gustaria abordar una manera mucho más simple y que a la larga seguro te servirá para tus desarrollos. Y es instalar una librería de componentes que funcionan diferente para cada plataforma.

Instalamos NativeBase

npm install native-base --save  

posteriormente linkeamos todos las dependencias que esta librería utiliza, cómo los iconos. con un comando muy sencillo:

react-native link  

Y estamos listos para utilizar algunos de los componentes de esta increible librería

import React, { Component } from 'react';  
import { View, Text, StyleSheet } from 'react-native';  
import { Container, Header, Title, Content, Footer, FooterTab, Button, Left, Right, Body, Icon } from 'native-base';

class App extends Component {  
    render(){
        return(
            <Container>
                <Header>
                    <Left>
                        <Button transparent>
                            <Icon name='menu' />
                        </Button>
                    </Left>
                    <Body>
                        <Title>Header</Title>
                    </Body>
                    <Right />
                </Header>
                <Content>
                    <View style={styles.container}>
                        <Text>FixterGeek</Text>
                    </View>
                </Content>
                <Footer>
                    <FooterTab>
                        <Button full>
                            <Text>Footer</Text>
                        </Button>
                    </FooterTab>
                </Footer>
            </Container>
        );
    }
}

const styles = StyleSheet.create({  
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
    }
});

export default App;

De este código notese:

Hemos importado una lista de componentes que vienen desde la librería NativeBase

Los hemos usado para darle forma a nuestra app

nuestro View y Text que teníamos originalmente quedo dentro del componente Content

react-native run-android  
ó
react-native run-ios  

Esto porque debe cargar la nueva librería de componentes, posteriormente bastaría con ir al emulador que está corriendo y hacer cmd + r en iOS y presionar doble vez R en Android para ver los cambios reflejarse.

Como puedes ver, tenemos la misma app renderizada de forma diferente por cada sistema operativo, inclusive si das clic al footer en Android tendrá el efecto de olas de Material design. Esto nos va a permitir escribir código 1 sola vez y aún así obtener el mejor UX para cada dispositivo. ¿No es genial?

Vamos a dejar este Post hasta aquí. Pero proximamente vamos a seguir trabajando con esta librería y vamos a crear cosas geniales para ambos sistemas operativos. Nos leemos pronto ;)