Component Generator for React Native(using React Navigation & Flow)

README.md

React Native Gen Component Script

Example Usage

$ chmod +x gem_component.sh # First make sure the script is executable
$ ./gen_component.sh Home

Which will create the following files:

• components/home/Home.js
• components/home/index.js
• components/home/Home.spec.js

TODO

• Make component directory snake case - example -> 'MyContainer' => 'my_container'

gen_component.sh

#!/bin/bash

#
# EXAMPLE USAGE
#
# * Your script must be executable:
# chmod +x gem_component.sh
#
# * Requires a "components" directory -or- change the directory
#   to a path that works for your project.
#
# Then call it with: $ ./gen_component Home
#
# Creates the following Files:
#   ---> components/home/Home.js
#   ---> components/home/index.js
#   ---> components/home/Home.spec.js
#


# Exit with no arguments
if [ -z "$*" ]; then 
  echo "Must supply component name as only argument"
  exit 1
fi

function default_export {
cat > components/$1/index.js << EOF
import $2 from './$2'

export default $2
EOF
}

function component {
cat > components/$1/$2.js << EOF
import React from 'react'
import { Text, View } from 'react-native'

class $2 extends React.Component {
  static navigationOptions = {
    title: '$2'
  }
  render() {
    return(
      <View>
        <Text>$2</Text>
      </View>
    ) 
  }
}

export default $2
EOF
}

function component_spec {
cat > components/$1/$2.spec.js << EOF
import React from 'react'
import { shallow } from 'enzyme'
import toJson from 'enzyme-to-json'
import $2 from './$2'

describe('<$2 />', () => {
  it('renders', () => {
    const navigationStub = jest.fn()
    const wrapper = shallow(<$2 navigation={navigationStub}/>)
    expect(toJson(wrapper)).toMatchSnapshot()
  })
})
EOF
}

echo "         _           _                    _               _                  _            _       _   "
echo "        /\ \        /\ \     _           / /\            / /\               / /\         / /\    / /\ "
echo "       /  \ \      /  \ \   /\_\        / /  \          / /  \             / /  \       / / /   / / / "
echo "      / /\ \ \    / /\ \ \_/ / /       / / /\ \        / / /\ \           / / /\ \__   / /_/   / / /  "
echo "     / / /\ \_\  / / /\ \___/ /       / / /\ \ \      / / /\ \ \         / / /\ \___\ / /\ \__/ / /   "
echo "    / / /_/ / / / / /  \/____/       / / /\ \_\ \    / / /  \ \ \        \ \ \ \/___// /\ \___\/ /    "
echo "   / / /__\/ / / / /    / / /       / / /\ \ \___\  / / /___/ /\ \        \ \ \     / / /\/___/ /     "
echo "  / / /_____/ / / /    / / /       / / /  \ \ \__/ / / /_____/ /\ \   _    \ \ \   / / /   / / /      "
echo " / / /\ \ \  / / /    / / /       / / /____\_\ \  / /_________/\ \ \ /_/\__/ / /  / / /   / / /       "
echo "/ / /  \ \ \/ / /    / / /       / / /__________\/ / /_       __\ \_\\ \/___/ /  / / /   / / /        "
echo "\/_/    \_\/\/_/     \/_/        \/_____________/\_\___\     /____/_/ \_____\/   \/_/    \/_/         "

echo "Creating component $1...."
component=$1
component_path=$(echo "$component" | tr '[:upper:]' '[:component_path=$(echo "$component" | sed -e 's/\([A-Z]\)/\_\1/g' -e 's/\_//' | tr '[:upper:]' '[:lower:]') # Camelcase name to create friendly pathlower:]') # Lowercase name to create friendly path

mkdir "components/$component_path"
default_export $component_path $component
component $component_path $component
component_spec $component_path $component