Configuration to build React Native apps with ES6 using webpack and Babel

Overview

React Native in ES6 with webpack and Babel

DEPRECATED!

It's possible to write React Native apps in ES6+ using babel-loader and webpack.

Check better approach using DependencyGraph module: dep-graph.

Basically you need to compile everything to index.ios.js file, which is then transformed by react-native. Also, to stop webpack from trying to load native (Objective-C) components, you need to define them all as externals and set libraryTarget: 'commonjs' in webpack config, this way webpack will not resolve require to native components.

Check ignore-modules.js for the regexp to match all native components, it is extracted using approach described in dep-graph branch.

Check webpack.config.js for build configuration.

Usage

Before running the project, change code location in iOS/AppDelegate.m to localhost to run on iOS Simulator or to your computer's IP address to run on device. Run in the terminal webpack --config webpack.config.js, open another tab and run react-native start.

Known limitations

  • No support for ES6 classes. There's no React.Component or any other extendable base class.
You might also like...
Pepperoni - React Native App Starter Kit for Android and iOS
Pepperoni - React Native App Starter Kit for Android and iOS

Futurice React Native Starter Kit ⚠️ Deprecation Warning Dear community, as time moved on so did React Native and we've not been able to provide conti

👾 Clean and minimalist React Native template for a quick start with TypeScript.

👾 React Native Template TypeScript Clean and minimalist React Native template for a quick start with TypeScript. ⭐ Features Elegant usage directly wi

Just a starter code to use redux and react-native with Login

React Native Redux Starter Code Login using Redux, Redux Saga and Redux Storage Good practice to create a Login using Redux, Redux Saga and Redux Stor

a React Native and Meteor boilerplate
a React Native and Meteor boilerplate

a React-Native and Meteor boilerplate INTRO This project aims to put together the following technologies: React Native (as frontend) Meteor 1.4 (as ba

React-native Boilerplate and Chuck Norris

RNboilerplate A React-native boilerplate with api integration (Chuck Norris facts). Getting Started npm install Rename project Install the Package re

React Native Starter Kit with Firebase Auth and Facebook Login
React Native Starter Kit with Firebase Auth and Facebook Login

React Native Starter Kit 🚀 Bootstrap your app development by using this awesome react native starter kit, integrated with Firebase Auth and Facebook

React Native Boilerplate - Redux + Saga + Reselect + redux-persist + react-navigation + TypeScript

React Native Boilerplate with Typescript Overview This React Native template for building solid applications through SOC(separation of concerns) betwe

A React-Native Android iOS Starter App/ BoilerPlate / Example with Redux, RN Router,  & Jest with the Snowflake Hapi Server running locally or on RedHat OpenShift for the backend, or a Parse Server running locally or remotely on Heroku React Native Starter App with NativeBase + CodePush + Redux
React Native Starter App with NativeBase + CodePush + Redux

Discontinued in favour of ReactNativeSeed.com Native Starter Kit v6.1.0 A Starter Kit for React Native + NativeBase + React Navigation + Redux + CodeP

Comments
  • Update ignore-modules.js

    Update ignore-modules.js

    Add SegmentedControlIOS to ingored modules regex as it was causing the following error when building react-native at v0.4.x under my loader configuration which includes some files from within the node_modules directory written in ES6/7 (e.g. react-native-video).

    The error I was seeing:

    ERROR in ./~/react-native/Libraries/react-native/react-native.js
    Module not found: Error: Cannot resolve module 'SegmentedControlIOS' in /Users/jhabdas/Developer/react-native-es6-reflux/node_modules/react-native/Libraries/react-native
     @ ./~/react-native/Libraries/react-native/react-native.js 30:23-53
    

    Once the module was ignored the error went away.

    opened by ghost 3
  • Adds assetExts expected by react-native >= 5.0.0 to fix build error

    Adds assetExts expected by react-native >= 5.0.0 to fix build error

    When react-native landed v0.5.0 the webpack-watch script stopped functioning as there was an expected attribute required to support some new asset extension functionality. This pull resolves that issue.

    opened by ghost 2
  • Fixes webpack task; suggestions

    Fixes webpack task; suggestions

    Hi Roman,

    thanks for your work on this boilerplate. I tried to use your newer dep-graph branch, but ran into issues when trying to npm run webpack. I tried to fix these here and I think successfully so. It seemed to be two faced:

    • supports-color module was not installed
    • for some reason, assetsRoot is not allowed in DependencyGraph options; removing it seemed to fix it

    I can't guarantee that this is without side effects, but it got things working for me.

    Also, I noticed that the gitignore did not contain the react-native default, resulting in unstaged files because I touched the Xcode project (just the usual Xcode insanity!). I've taken the liberty to add those to the gitignore.

    Please feel free to pick and choose whatever you think is useful for your project.

    Best, David

    opened by davidpfahler 2
Owner
Roman Liutikov
Software Engineer
Roman Liutikov
🚀🚀🚀Build universal cross-platform apps with React Native. Includes latest iOS, tvOS, Android, Android TV, Android Wear, Web, Tizen TV, Tizen Watch, Tizen Mobile, LG webOS, macOS/OSX, Windows, KaiOS, FirefoxOS Firefox TV platforms

build universal cross-platform apps with react native Introduction Video Quick Start • Features • Templates • Plugins • Integrations • JSON Configurat

Pavel Jacko 1.6k Jan 7, 2023
Professional react-native starter kit with everything you'll ever need to deploy rock solid apps

WARNING This starter kit has been deprecated and is no longer being actively maintained by Ueno. React Native Starter The Professional React Native St

Ueno: A full-service agency 577 Oct 26, 2022
A react-native starter kit using RN0.63, Flipper support, LogBox, AndroidX, Hooks workflow, easy-peasy, code-push, Themes support and much more

cd A GOOD, up to date and easy to use starter and learning tool for beginners to intermediate. (IOS and Android ready) NEW React-Native updated to 0.6

HARISH JANGRA 254 Oct 29, 2022
React native starter using typescript and redux-saga.

?? React Native Boilerplate - May 2021 React Native Boilerplate is a starting point for React Native application. This project is configured with redu

Vilmar Cabañero 2 Feb 3, 2022
A React Native template for building solid applications, using JavaScript or Typescript (you choose).

TheCodingMachine React Native boilerplate This project is a React Native boilerplate that can be used to kickstart a mobile application. The boilerpla

TheCodingMachine 3.4k Jan 4, 2023
Demo app for React Native Elements (w/ React Native Web)

React Native Elements App Mobile App This is the Demo app for React Native Elements built with Expo. The purpose of this app is to demonstrate the usa

React Native Elements 1.3k Jan 6, 2023
React Native Typescript starter kit / template (Redux Thunk + React Native Navigation v7 + TSLint)

React Native Template - TypeScript An opinionated React Native Starter Kit with React Native Navigation + Redux + Airbnb TSLint to build iOS and Andro

Amit Mangal 269 Dec 29, 2022
Rhinos-app is a react-native app which uses react-native-web to achieve cross-platform design.

Rhinos-app Rhinos-app is a react-native app which uses react-native-web to achieve cross-platform design. Live Demo: web version ?? FEATURES: ?? ?? Ru

null 82 Feb 14, 2022
React Native + React-Redux + Native Base + Code Push

React-Native-Starter-Pack React Native + React-Redux + Native Base + Code Push ##Setting Up Project npm i -g rninit rninit init <new-app-name> --sourc

Simar 40 Feb 14, 2022
Infinite Red's cutting edge React Native project boilerplate, along with a CLI, component/model generators, and more!

Ignite - the hottest React Native boilerplate Battle-tested React Native boilerplate The culmination of five years of constant React Native developmen

Infinite Red, Inc. 14.7k Jan 5, 2023