Não sei se é só eu, mas tenho problemas com React, mesmo me divertindo com e achando uma das ferramentas mais produtivas que vi em anos. Meu problema com o React é um pouco do ecossistema e o infinito de configurações ao invés de convenções (Ember ❤) e também aquele infinito de declarações de estrutura misturado com estilos e código que depois falam que não está misturando nada só tecnologia. (vou publicar meu artigo detalhadamente sobre, prometo)
Mas vamos ao que importa que é como organizei os arquivos e para mim fez sentido, pode ser até o recomendado e já usado no mercado, mas para aplicação de pessoal de React Native separei da seguinte forma:
Components
Acredito que ao trabalhar com uma arquitetura orientada a components essa separação é importante, junto dela deve existir algo para um shared-components, essa estrutura ajuda para components em comum de outras estruturas.
Estruturas principais de components serve para organizar um conjunto de telas e fica em uma estrutura principal no mesmo nível da shared-components. Por exemplos Authentication tem as telas de login e signup dentro dela.
Nessa estrutura principal deve exister um arquivo index.js que expõe os arquivos das pastas para a aplicação principal.
Screen-Components
Vou chamar dessa forma as estruturas que montam e agem para uma tela em si, vamos usar a já citada tela de Login que vc encontraria na seguinte caminho no terminal /App/components/authentication/login/.
Devem existir 3 arquivos um index.js, login.js e login.styles.js, cada arquivo representa uma função bem especifica, expor a classe, para evitar a declaração login/login, organizar estilos dessa tela e também conter a lógica do component.
O arquivo index.js seria algo assim:
// index.js
import { Login } from './login';
export default { Login };
Já o login.js ficaria assim:
import React from 'react'
import { Text, TextInput, View, Button } from 'react-native';
import { styles } from './login.style';
export default class Login extends React.Component {}
e o arquivo de login.styles.js:
import { StyleSheet } from 'react-native';
const styles = StyleSheet.create({});
export default { styles };
Isso ajuda a ter arquivos menores e com mais fácil manutenção, ainda estou pensando em algo para separar essa lógica da renderização, mas aí não seria React.
Me fale seus opiniões sobre o assunto lá no twitter. :)