Skip to content

Instantly share code, notes, and snippets.

@MedRedha
Last active November 18, 2020 10:43
Show Gist options
  • Save MedRedha/1a0f5d32cdbb876468047bd8fe84121f to your computer and use it in GitHub Desktop.
Save MedRedha/1a0f5d32cdbb876468047bd8fe84121f to your computer and use it in GitHub Desktop.
Legal Doctrine Mobile Project TypeScript File Structure Boilerplate
//////// 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 ////////
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);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment