Feature Request : More advanced examples

[jordwalke]

Are there any more advanced examples? I'd love to see them.

[dabbott]

I'm glad you asked! This thing can do a lot of awesome stuff! But I haven't documented the latest stuff I added for www.reactnativeexpress.com.

If you wanna take a peek before I add the docs, you can see stuff I do here: https://github.com/dabbott/react-native-express/blob/master/src/components/WebPlayer.js

• run multiple files which can be required from one another
• include external modules, either as common JS or attached to window (e.g. Redux, React Redux, Redux Persist, React Native Animatable)
• customize which panes are shown, in which order (text editor, transpiler output, phone)
• customize styling

It's sorta annoying having to JSON and URL encode the params (and it's somewhat inconsistent), so I'm gonna have this npm package actually be a React component that does that internally.

[dabbott]

Here's an advanced example with multiple files, multiple remote requires, customized styling... oh, and fullscreen :)

It does bump up against some URL limits

http://cdn.rawgit.com/dabbott/react-native-web-player/gh-v1.6.1/index.html#width=260&scale=0.75&fullscreen=true&styles=%7B%22tab%22%3A%7B%22backgroundColor%22%3A%22rgb(250%2C250%2C250)%22%7D%2C%22header%22%3A%7B%22backgroundColor%22%3A%22rgb(250%2C250%2C250)%22%2C%22boxShadow%22%3A%22rgba(0%2C%200%2C%200%2C%200.2)%200px%201px%201px%22%2C%22zIndex%22%3A10%7D%2C%22headerText%22%3A%7B%22color%22%3A%22%23AAA%22%2C%22fontWeight%22%3A%22normal%22%7D%2C%22transpilerHeader%22%3A%7B%22backgroundColor%22%3A%22rgb(240%2C240%2C240)%22%2C%22boxShadow%22%3A%22rgba(0%2C%200%2C%200%2C%200.2)%200px%201px%201px%22%2C%22zIndex%22%3A10%7D%2C%22transpilerHeaderText%22%3A%7B%22color%22%3A%22%23888%22%2C%22fontWeight%22%3A%22normal%22%7D%2C%22tabText%22%3A%7B%22color%22%3A%22%23AAA%22%7D%2C%22tabTextActive%22%3A%7B%22color%22%3A%22%23000%22%7D%7D&files=%5B%5B%22index.js%22%2C%22import%20%7B%20AppRegistry%2C%20View%20%7D%20from%20'react-native'%5Cnimport%20%7B%20createStore%20%7D%20from%20'redux'%5Cnimport%20%7B%20Provider%20%7D%20from%20'react-redux'%5Cnimport%20%7B%20persistStore%2C%20autoRehydrate%20%7D%20from%20'redux-persist'%5Cn%5Cn%2F%2F%20Import%20the%20reducer%20and%20create%20a%20store%5Cnimport%20%7B%20reducer%20%7D%20from%20'.%2FtodoListRedux'%5Cn%5Cn%2F%2F%20Add%20the%20autoRehydrate%20middleware%20to%20your%20redux%20store%5Cnconst%20store%20%3D%20createStore(reducer%2C%20undefined%2C%20autoRehydrate())%5Cn%5Cn%2F%2F%20Enable%20persistence%5CnpersistStore(store)%5Cn%5Cn%2F%2F%20Import%20the%20App%20container%20component%5Cnimport%20App%20from%20'.%2FApp'%5Cn%5Cn%2F%2F%20Pass%20the%20store%20into%20the%20Provider%5Cnconst%20AppWithStore%20%3D%20()%20%3D%3E%20(%5Cn%20%20%3CProvider%20store%3D%7Bstore%7D%3E%5Cn%20%20%20%20%3CApp%20%2F%3E%5Cn%20%20%3C%2FProvider%3E%5Cn)%5Cn%5CnAppRegistry.registerComponent('App'%2C%20()%20%3D%3E%20AppWithStore)%5Cn%22%5D%2C%5B%22todoListRedux.js%22%2C%22%2F%2F%20The%20types%20of%20actions%20that%20you%20can%20dispatch%20to%20modify%20the%20state%20of%20the%20store%5Cnexport%20const%20types%20%3D%20%7B%5Cn%20%20ADD%3A%20'ADD'%2C%5Cn%20%20REMOVE%3A%20'REMOVE'%2C%5Cn%7D%5Cn%5Cn%2F%2F%20Helper%20functions%20to%20dispatch%20actions%2C%20optionally%20with%20payloads%5Cnexport%20const%20actionCreators%20%3D%20%7B%5Cn%20%20add%3A%20(item)%20%3D%3E%20%7B%5Cn%20%20%20%20return%20%7Btype%3A%20types.ADD%2C%20payload%3A%20item%7D%5Cn%20%20%7D%2C%5Cn%20%20remove%3A%20(index)%20%3D%3E%20%7B%5Cn%20%20%20%20return%20%7Btype%3A%20types.REMOVE%2C%20payload%3A%20index%7D%5Cn%20%20%7D%5Cn%7D%5Cn%5Cn%2F%2F%20Initial%20state%20of%20the%20store%5Cnconst%20initialState%20%3D%20%7B%5Cn%20%20todos%3A%20%5B'Click%20to%20remove'%2C%20'Learn%20React%20Native'%2C%20'Write%20Code'%2C%20'Ship%20App'%5D%2C%5Cn%7D%5Cn%5Cn%2F%2F%20Function%20to%20handle%20actions%20and%20update%20the%20state%20of%20the%20store.%5Cn%2F%2F%20Notes%3A%5Cn%2F%2F%20-%20The%20reducer%20must%20return%20a%20new%20state%20object.%20It%20must%20never%20modify%5Cn%2F%2F%20%20%20the%20state%20object.%20State%20objects%20should%20be%20treated%20as%20immutable.%5Cn%2F%2F%20-%20We%20set%20%5C%5C%60state%5C%5C%60%20to%20our%20%5C%5C%60initialState%5C%5C%60%20by%20default.%20Redux%20will%5Cn%2F%2F%20%20%20call%20reducer()%20with%20no%20state%20on%20startup%2C%20and%20we%20are%20expected%20to%5Cn%2F%2F%20%20%20return%20the%20initial%20state%20of%20the%20app%20in%20this%20case.%5Cnexport%20const%20reducer%20%3D%20(state%20%3D%20initialState%2C%20action)%20%3D%3E%20%7B%5Cn%20%20const%20%7Btodos%7D%20%3D%20state%5Cn%20%20const%20%7Btype%2C%20payload%7D%20%3D%20action%5Cn%5Cn%20%20switch%20(type)%20%7B%5Cn%20%20%20%20case%20types.ADD%3A%20%7B%5Cn%20%20%20%20%20%20return%20%7B%5Cn%20%20%20%20%20%20%20%20...state%2C%5Cn%20%20%20%20%20%20%20%20todos%3A%20%5Bpayload%2C%20...todos%5D%2C%5Cn%20%20%20%20%20%20%7D%5Cn%20%20%20%20%7D%5Cn%20%20%20%20case%20types.REMOVE%3A%20%7B%5Cn%20%20%20%20%20%20return%20%7B%5Cn%20%20%20%20%20%20%20%20...state%2C%5Cn%20%20%20%20%20%20%20%20todos%3A%20todos.filter((todo%2C%20i)%20%3D%3E%20i%20!%3D%3D%20payload)%2C%5Cn%20%20%20%20%20%20%7D%5Cn%20%20%20%20%7D%5Cn%20%20%7D%5Cn%5Cn%20%20return%20state%5Cn%7D%5Cn%22%5D%2C%5B%22App.js%22%2C%22import%20React%2C%20%7B%20Component%20%7D%20from%20'react'%5Cnimport%20%7B%20AppRegistry%2C%20View%20%7D%20from%20'react-native'%5Cnimport%20%7B%20connect%20%7D%20from%20'react-redux'%5Cn%5Cnimport%20%7B%20actionCreators%20%7D%20from%20'.%2FtodoListRedux'%5Cnimport%20List%20from%20'.%2FList'%5Cnimport%20Input%20from%20'.%2FInput'%5Cnimport%20Title%20from%20'.%2FTitle'%5Cn%5Cnconst%20mapStateToProps%20%3D%20(state)%20%3D%3E%20(%7B%5Cn%20%20todos%3A%20state.todos%2C%5Cn%7D)%5Cn%5Cnclass%20App%20extends%20Component%20%7B%5Cn%5Cn%20%20onAddTodo%20%3D%20(text)%20%3D%3E%20%7B%5Cn%20%20%20%20const%20%7Bdispatch%7D%20%3D%20this.props%5Cn%5Cn%20%20%20%20dispatch(actionCreators.add(text))%5Cn%20%20%7D%5Cn%5Cn%20%20onRemoveTodo%20%3D%20(index)%20%3D%3E%20%7B%5Cn%20%20%20%20const%20%7Bdispatch%7D%20%3D%20this.props%5Cn%5Cn%20%20%20%20dispatch(actionCreators.remove(index))%5Cn%20%20%7D%5Cn%5Cn%20%20render()%20%7B%5Cn%20%20%20%20const%20%7Btodos%7D%20%3D%20this.props%5Cn%5Cn%20%20%20%20return%20(%5Cn%20%20%20%20%20%20%3CView%3E%5Cn%20%20%20%20%20%20%20%20%3CTitle%3E%5Cn%20%20%20%20%20%20%20%20%20%20To-Do%20List%5Cn%20%20%20%20%20%20%20%20%3C%2FTitle%3E%5Cn%20%20%20%20%20%20%20%20%3CInput%5Cn%20%20%20%20%20%20%20%20%20%20placeholder%3D%7B'Type%20a%20todo%2C%20then%20hit%20enter!'%7D%5Cn%20%20%20%20%20%20%20%20%20%20onSubmitEditing%3D%7Bthis.onAddTodo%7D%5Cn%20%20%20%20%20%20%20%20%2F%3E%5Cn%20%20%20%20%20%20%20%20%3CList%5Cn%20%20%20%20%20%20%20%20%20%20list%3D%7Btodos%7D%5Cn%20%20%20%20%20%20%20%20%20%20onPressItem%3D%7Bthis.onRemoveTodo%7D%5Cn%20%20%20%20%20%20%20%20%2F%3E%5Cn%20%20%20%20%20%20%3C%2FView%3E%5Cn%20%20%20%20)%5Cn%20%20%7D%5Cn%7D%5Cn%5Cnexport%20default%20connect(mapStateToProps)(App)%5Cn%22%5D%2C%5B%22List.js%22%2C%22import%20React%2C%20%7B%20Component%20%7D%20from%20'react'%5Cnimport%20%7B%20AppRegistry%2C%20View%2C%20TouchableOpacity%2C%20Text%2C%20StyleSheet%20%7D%20from%20'react-native'%5Cn%5Cnexport%20default%20class%20List%20extends%20Component%20%7B%5Cn%5Cn%20%20renderItem%20%3D%20(text%2C%20i)%20%3D%3E%20%7B%5Cn%20%20%20%20const%20%7BonPressItem%7D%20%3D%20this.props%5Cn%5Cn%20%20%20%20return%20(%5Cn%20%20%20%20%20%20%3CTouchableOpacity%5Cn%20%20%20%20%20%20%20%20style%3D%7Bstyles.item%7D%5Cn%20%20%20%20%20%20%20%20onPress%3D%7B()%20%3D%3E%20onPressItem(i)%7D%5Cn%20%20%20%20%20%20%3E%5Cn%20%20%20%20%20%20%20%20%3CText%3E%7Btext%7D%3C%2FText%3E%5Cn%20%20%20%20%20%20%3C%2FTouchableOpacity%3E%5Cn%20%20%20%20)%5Cn%20%20%7D%5Cn%5Cn%20%20render()%20%7B%5Cn%20%20%20%20const%20%7Blist%7D%20%3D%20this.props%5Cn%5Cn%20%20%20%20return%20(%5Cn%20%20%20%20%20%20%3CView%3E%5Cn%20%20%20%20%20%20%20%20%7Blist.map(this.renderItem)%7D%5Cn%20%20%20%20%20%20%3C%2FView%3E%5Cn%20%20%20%20)%5Cn%20%20%7D%5Cn%7D%5Cn%5Cnconst%20styles%20%3D%20StyleSheet.create(%7B%5Cn%20%20item%3A%20%7B%5Cn%20%20%20%20backgroundColor%3A%20'whitesmoke'%2C%5Cn%20%20%20%20marginBottom%3A%205%2C%5Cn%20%20%20%20padding%3A%2015%2C%5Cn%20%20%7D%2C%5Cn%7D)%5Cn%22%5D%2C%5B%22Input.js%22%2C%22import%20React%2C%20%7B%20Component%20%7D%20from%20'react'%5Cnimport%20%7B%20AppRegistry%2C%20TextInput%2C%20StyleSheet%20%7D%20from%20'react-native'%5Cn%5Cnexport%20default%20class%20Input%20extends%20Component%20%7B%5Cn%5Cn%20%20state%20%3D%20%7B%5Cn%20%20%20%20text%3A%20''%2C%5Cn%20%20%7D%5Cn%5Cn%20%20onChangeText%20%3D%20(text)%20%3D%3E%20this.setState(%7Btext%7D)%5Cn%5Cn%20%20onSubmitEditing%20%3D%20()%20%3D%3E%20%7B%5Cn%20%20%20%20const%20%7BonSubmitEditing%7D%20%3D%20this.props%5Cn%20%20%20%20const%20%7Btext%7D%20%3D%20this.state%5Cn%5Cn%20%20%20%20if%20(!text)%20return%20%2F%2F%20Don't%20submit%20if%20empty%5Cn%5Cn%20%20%20%20onSubmitEditing(text)%5Cn%20%20%20%20this.setState(%7Btext%3A%20''%7D)%5Cn%20%20%7D%5Cn%5Cn%20%20render()%20%7B%5Cn%20%20%20%20const%20%7BonSubmitEditing%2C%20placeholder%7D%20%3D%20this.props%5Cn%20%20%20%20const%20%7Btext%7D%20%3D%20this.state%5Cn%5Cn%20%20%20%20return%20(%5Cn%20%20%20%20%20%20%3CTextInput%5Cn%20%20%20%20%20%20%20%20style%3D%7Bstyles.input%7D%5Cn%20%20%20%20%20%20%20%20value%3D%7Btext%7D%5Cn%20%20%20%20%20%20%20%20placeholder%3D%7Bplaceholder%7D%5Cn%20%20%20%20%20%20%20%20onChangeText%3D%7Bthis.onChangeText%7D%5Cn%20%20%20%20%20%20%20%20onSubmitEditing%3D%7Bthis.onSubmitEditing%7D%5Cn%20%20%20%20%20%20%2F%3E%5Cn%20%20%20%20)%5Cn%20%20%7D%5Cn%7D%5Cn%5Cnconst%20styles%20%3D%20StyleSheet.create(%7B%5Cn%20%20input%3A%20%7B%5Cn%20%20%20%20padding%3A%2015%2C%5Cn%20%20%20%20height%3A%2050%2C%5Cn%20%20%7D%2C%5Cn%7D)%5Cn%22%5D%2C%5B%22Title.js%22%2C%22import%20React%2C%20%7B%20Component%20%7D%20from%20'react'%5Cnimport%20%7B%20View%2C%20Text%2C%20StyleSheet%20%7D%20from%20'react-native'%5Cn%5Cnexport%20default%20class%20Title%20extends%20Component%20%7B%5Cn%5Cn%20%20render()%20%7B%5Cn%20%20%20%20const%20%7Bchildren%7D%20%3D%20this.props%5Cn%5Cn%20%20%20%20return%20(%5Cn%20%20%20%20%20%20%3CView%20style%3D%7Bstyles.header%7D%3E%5Cn%20%20%20%20%20%20%20%20%3CText%20style%3D%7Bstyles.title%7D%3E%7Bchildren%7D%3C%2FText%3E%5Cn%20%20%20%20%20%20%3C%2FView%3E%5Cn%20%20%20%20)%5Cn%20%20%7D%5Cn%7D%5Cn%5Cnconst%20styles%20%3D%20StyleSheet.create(%7B%5Cn%20%20header%3A%20%7B%5Cn%20%20%20%20backgroundColor%3A%20'skyblue'%2C%5Cn%20%20%20%20padding%3A%2015%2C%5Cn%20%20%7D%2C%5Cn%20%20title%3A%20%7B%5Cn%20%20%20%20textAlign%3A%20'center'%2C%5Cn%20%20%20%20color%3A%20'white'%2C%5Cn%20%20%7D%2C%5Cn%7D)%5Cn%22%5D%5D&vendorComponents=%5B%5B%22redux%22%2C%22Redux%22%2C%22https%3A%2F%2Fcdnjs.cloudflare.com%2Fajax%2Flibs%2Fredux%2F3.6.0%2Fredux.min.js%22%5D%2C%5B%22react-redux%22%2C%22ReactRedux%22%2C%22https%3A%2F%2Fcdnjs.cloudflare.com%2Fajax%2Flibs%2Freact-redux%2F4.4.5%2Freact-redux.min.js%22%5D%2C%5B%22redux-persist%22%2C%22redux-persist%22%2C%22https%3A%2F%2Fcdnjs.cloudflare.com%2Fajax%2Flibs%2Fredux-persist%2F4.0.0-alpha7%2Fredux-persist.js%22%5D%5D&panes=%5B%22editor%22%2C%22player%22%5D

[jakekwak]

How about supporting the JSZip? (https://stuk.github.io/jszip/ ) The zip file include the everything like same as the real file.

[dabbott]

I've added a couple advanced examples to the README, along with a full API reference.

@jordwalke are there specific features you're interested in? I'm pretty open to adding anything React/React Native-related.