Legal Doctrine Mobile Project TypeScript File Structure Boilerplate

FILENAME.STYLE.TSX

//////// FILENAME.STYLE.TS ////////

import { Dimensions, Platform, StyleSheet } from 'react-native';

const { width, height } = Dimensions.get('window');

const styles = StyleSheet.create({
  mainContainer: {
    width,
    height,
    ...Platform.select({
      ios: {
        fontFamily: 'Source Sans Pro',
        fontWeight: 'bold',
      },
      android: {
        fontFamily: 'SansProBold',
      },
    }),
  },
});

export default styles;

FILENAME.TSX

//////// FILENAME.TSX ////////

import * as React from 'react';
// HERE OTHER COMPONENTS IMPORT
import { View } from 'react-native';
import { connect } from 'react-redux';
// HERE STYLING IMPORT
import colors from '../../assets/colors/colors';
import styles from './FILENAME.style';

const mapStateToProps = (state) => ({
  PropName: state.ReduxName.ReduxPropName,
});

// TYPE COMPONENT STRICT DEFINITION
interface AppProps {
  PropName: TYPE;
}

interface AppState {
  VarName: TYPE;
}

// HERE WE GO!
class SocialLogin extends React.Component<AppProps, AppState> {
  constructor(props: AppProps) {
    super(props);
    this.state = {
      VarName: ANY,
    };
  }

  // LIFECYCLES ORDERED FROM MOUNTING TO UNMOUNTIN
  componentDidMount() {}

  componentWillUnmount() {}

  // SOME OTHER CODE
  // ...
  // ...

  // RENDERING
  render() {
    const { VarName } = this.state; // OR this.props // NEVER USE THIS.ANY.DECLARATIONS
    return (
      <View
        style={{
          ...styles.mainContainer,
          backgroundColor: VarName === 'light' ? colors.white : colors.black,
        }}
      />
    );
  }
}

// COMPONENT DEFAULT EXPORT
export default connect(mapStateToProps)(FILENAME);