From 3ea9082995ae42a9beefd9f9a1a1dda4b3aad778 Mon Sep 17 00:00:00 2001 From: mozafar Date: Sat, 23 Nov 2019 21:02:20 +0100 Subject: [PATCH] Reorganise files structure and refactore theme file --- App.js | 23 ++++++------ components/TopicDescription.js | 22 ++++++------ components/TopicDetails.js | 16 ++++----- components/core/AppText.js | 10 +++--- components/data/topics.json | 17 +++++---- themes/index.js => components/theme.js | 49 ++++++++++++++------------ 6 files changed, 71 insertions(+), 66 deletions(-) rename themes/index.js => components/theme.js (67%) diff --git a/App.js b/App.js index 8291610..e57ac36 100644 --- a/App.js +++ b/App.js @@ -16,7 +16,7 @@ import { StatusBar, } from 'react-native'; import AppText from './components/core/AppText'; -import {colors, metrics, style} from './themes'; +import {Colors, Metrics, Styles} from './components/theme'; import TopicsList from './components/TopicsList'; import Styling from './components/slides/Styling'; @@ -33,15 +33,18 @@ const App: () => React$Node = () => { contentInsetAdjustmentBehavior="automatic" style={styles.scrollView}> - + Intro to React Native {'\r'} - (Layout and Styling) + (Layout and Styling) Mozafar @kabaros + + github.com/kabaros/ReactNativeTalk + @@ -50,11 +53,11 @@ const App: () => React$Node = () => { const styles = StyleSheet.create({ scrollView: { - backgroundColor: colors.background, + backgroundColor: Colors.background, }, sectionContainer: { - marginTop: metrics.doubleSection, - paddingHorizontal: metrics.section, + marginTop: Metrics.section, + paddingHorizontal: Metrics.section, }, sectionTitle: { textAlign: 'center', @@ -62,16 +65,16 @@ const styles = StyleSheet.create({ footer: { // backgroundColor: 'black', // height: 30, - backgroundColor: colors.footer, + backgroundColor: Colors.footer, alignItems: 'flex-end', margin: 20, }, footerText: { - ...style.small, - color: colors.lighterText, + ...Styles.small, + color: Colors.lighterText, }, safeArea: { - backgroundColor: colors.footer, + backgroundColor: Colors.footer, flex: 1, }, }); diff --git a/components/TopicDescription.js b/components/TopicDescription.js index 446d8da..4db07d4 100644 --- a/components/TopicDescription.js +++ b/components/TopicDescription.js @@ -2,7 +2,7 @@ import React, {useState} from 'react'; import {TouchableOpacity, Text, StyleSheet} from 'react-native'; import {TopicDetails} from './TopicDetails'; import AppText from './core/AppText'; -import {metrics, colors, style} from '../themes'; +import {Metrics, Colors, Styles} from './theme'; import Styling from './slides/Styling'; import ScalingStyles from './slides/ScalingStyles'; @@ -21,7 +21,7 @@ export const TopicDescription = props => { style={[ styles.topicHeader, styles.titleStyle, - !showMoreInfo ? style.small : null, + !showMoreInfo ? Styles.small : null, ]}> {title} @@ -29,7 +29,7 @@ export const TopicDescription = props => { style={[ styles.topicHeader, styles.subTitleStyle, - !showMoreInfo ? style.small : null, + !showMoreInfo ? Styles.small : null, ]}> {subtitle} @@ -52,21 +52,21 @@ const getCustomCompnent = name => { const styles = StyleSheet.create({ topicContainer: { flexDirection: 'row', - margin: metrics.marginVertical, - borderBottomColor: colors.border, - borderBottomWidth: metrics.horizontalLineHeight, + margin: Metrics.marginVertical, + borderBottomColor: Colors.border, + borderBottomWidth: Metrics.horizontalLineHeight, }, topicHeader: { - paddingTop: metrics.doublePadding, - paddingBottom: metrics.padding, + paddingTop: Metrics.doublePadding, + paddingBottom: Metrics.padding, }, titleStyle: { - ...style.regular, + ...Styles.regular, flex: 3, - color: colors.highlightText, + color: Colors.highlightText, }, subTitleStyle: { - ...style.medium, + ...Styles.medium, flex: 2, }, }); diff --git a/components/TopicDetails.js b/components/TopicDetails.js index 562ead7..a0e7871 100644 --- a/components/TopicDetails.js +++ b/components/TopicDetails.js @@ -1,6 +1,6 @@ import React, {Fragment} from 'react'; import {StyleSheet, View} from 'react-native'; -import {colors, style, metrics, size} from '../themes'; +import {Colors, Styles, Metrics, Sizes} from './theme'; import AppText from './core/AppText'; export const TopicDetails = ({bulletPoints}) => { @@ -19,14 +19,14 @@ export const TopicDetails = ({bulletPoints}) => { const styles = StyleSheet.create({ bulletContainer: { - borderBottomWidth: metrics.horizontalLineHeight, - borderBottomColor: colors.border, - paddingLeft: metrics.marginHorizontal, + borderBottomWidth: Metrics.horizontalLineHeight, + borderBottomColor: Colors.border, + paddingLeft: Metrics.marginHorizontal, }, bulletPoint: { - ...style.normal, - color: colors.lighterText, - lineHeight: size.regular * 1.5, - padding: metrics.padding, + ...Styles.normal, + color: Colors.lighterText, + lineHeight: Sizes.regular * 1.5, + padding: Metrics.padding, }, }); diff --git a/components/core/AppText.js b/components/core/AppText.js index accf412..d175b31 100644 --- a/components/core/AppText.js +++ b/components/core/AppText.js @@ -1,12 +1,12 @@ import React from 'react'; import {StyleSheet, Text} from 'react-native'; -import {style, colors} from '../../themes'; +import {Styles, Colors} from '../theme'; const getDefaultStyle = ({h1, h2}) => { - if (h1) return style.h1; - if (h2) return style.h2; + if (h1) return Styles.h1; + if (h2) return Styles.h2; - return style.normal; + return Styles.normal; }; const AppText = props => { @@ -15,7 +15,7 @@ const AppText = props => { const defaultStyle = getDefaultStyle(props); const finalStyle = [ defaultStyle, - {color: colors.text}, + {color: Colors.text}, {textAlign: centered ? 'center' : 'auto'}, props.style, ]; diff --git a/components/data/topics.json b/components/data/topics.json index 2acd3bf..28a7c93 100644 --- a/components/data/topics.json +++ b/components/data/topics.json @@ -3,10 +3,10 @@ "title": "Who am I", "subtitle": "Mozafar @kabaros", "details": [ - "Twitter: @kabaros", + "github.com/kabaros/ReactNativeTalk", "Glovo / Barcelona (since September)", - "CodeYourFuture Glasgow", - "MigraCode Barcelona (migracode.eu)" + "CodeYourFuture previously", + "Migracode Barcelona (migracode.eu)" ] }, { @@ -27,7 +27,8 @@ "Code once for Android and iOS", "Development Experience", "Performance (and native feel)", - "CodePush (OTA updates)" + "CodePush (OTA updates)", + "It's not only startups or hobby projects" ] }, { @@ -45,11 +46,9 @@ "subtitle": "The Layout engine", "details": [ "Yoga is an open-source, cross-platform layout library that implements Flexbox.", - "Flexbox (with few differences)", - "Expressive layout library, not implementing all of CSS.", - "No support for styling properties that have no impact on layout", - "https://yogalayout.com/docs", - "RTL is a first-class citizen" + "Expressive layout library, not implementing all of CSS (just bits that have impact on layout)", + "RTL is a first-class citizen", + "https://yogalayout.com/docs" ] }, { diff --git a/themes/index.js b/components/theme.js similarity index 67% rename from themes/index.js rename to components/theme.js index e4f9cf9..27b03e3 100644 --- a/themes/index.js +++ b/components/theme.js @@ -2,15 +2,9 @@ import {Dimensions, Platform} from 'react-native'; const {width, height} = Dimensions.get('window'); -export const type = { - base: 'Avenir-Book', - bold: 'Avenir-Black', - emphasis: 'HelveticaNeue-Italic', -}; - const baseFontSize = 16; -export const size = { +export const Sizes = { h1: baseFontSize * 2, h2: baseFontSize * 1.5, regular: baseFontSize, @@ -19,34 +13,40 @@ export const size = { tiny: baseFontSize * 0.5, }; -export const style = { +export const FontType = { + base: 'Avenir-Book', + bold: 'Avenir-Black', + emphasis: 'HelveticaNeue-Italic', +}; + +export const Styles = { h1: { - fontFamily: type.base, - fontSize: size.h1, + fontFamily: FontType.base, + fontSize: Sizes.h1, }, h2: { - fontFamily: type.base, - fontSize: size.h2, + fontFamily: FontType.base, + fontSize: Sizes.h2, }, normal: { - fontFamily: type.base, - fontSize: size.regular, + fontFamily: FontType.base, + fontSize: Sizes.regular, }, medium: { - fontFamily: type.base, - fontSize: size.medium, + fontFamily: FontType.base, + fontSize: Sizes.medium, }, small: { - fontFamily: type.base, - fontSize: size.small, + fontFamily: FontType.base, + fontSize: Sizes.small, }, description: { - fontFamily: type.base, - fontSize: size.medium, + fontFamily: FontType.base, + fontSize: Sizes.medium, }, }; -export const metrics = { +export const Metrics = { marginHorizontal: 10, marginVertical: 10, @@ -64,7 +64,7 @@ export const metrics = { navBarHeight: Platform.OS === 'ios' ? 64 : 54, }; -export const colors = { +export const Colors = { text: '#000', lighterText: '#444', background: '#FFF', @@ -73,7 +73,10 @@ export const colors = { border: '#eaeaea', }; -// export const colors = { +const scale = size => { + (width * size) / 315; +}; +// export const Colors = { // background: '#252525', // footer: '#252525', // text: '#ffda1f',