React Native @ Airbnb

7fd4ba468da56bb5330a6352c1b54f52?s=47 felipecsl
September 12, 2016

React Native @ Airbnb

This presentation was originally given by Leland Richardson and myself at the Bay Area Android Developer Meetup group at August 23rd, 2016 @ the LinkedIn SF office.

Meetup original link:
http://www.meetup.com/bayareaandroid/events/233316337/

Talk video:
https://www.youtube.com/watch?v=S6GdvVQB39Y&feature=youtu.be&t=24m

7fd4ba468da56bb5330a6352c1b54f52?s=128

felipecsl

September 12, 2016
Tweet

Transcript

  1. 6.
  2. 11.
  3. 12.
  4. 14.
  5. 29.
  6. 31.

    import React from 'react'; class HelloWorld extends React.Component { render()

    { return ( <div> <span> Hello World </span> </div> ); } }
  7. 32.

    import React from 'react'; import { View, Text } from

    'react-native'; class HelloWorld extends React.Component { render() { return ( <View> <Text> Hello World </Text> </View> ); } }
  8. 34.

    import React from 'react'; import { View, Text } from

    'react-native'; class HelloWorld extends React.Component { render() { return ( <View> <Text> Hello World </Text> </View> ); } }
  9. 35.

    import React from 'react'; import { View, Text } from

    'react-native'; class HelloWorld extends React.Component { render() { return { type: View, props: null, children: [{ type: Text, props: null, children: ['Hello World'], }], }; } }
  10. 36.

    import React from 'react'; import { View, Text } from

    'react-native'; class HelloWorld extends React.Component { render() { return ( <View> <Text> Hello World </Text> </View> ); } }
  11. 37.

    import React from 'react'; import { View, Text, StyleSheet }

    from 'react-native'; class HelloWorld extends React.Component { render() { return ( <View style={styles.container}> <Text style={styles.message}> Hello World </Text> </View> ); } } const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', alignItems: 'center', }, message: { fontSize: 28, fontColor: '#222222', }, });
  12. 38.

    const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center',

    alignItems: 'center', }, message: { fontSize: 28, fontColor: '#222222', }, }); { container: { top: 0, left: 0, width: 370, height: 600, }, message: { top: 280, left: 125, width: 120, height: 40, }, }
  13. 39.

    import React from 'react'; import { View, Text } from

    'react-native'; class HelloWorld extends React.Component { render() { return ( <View> <Text> Hello World </Text> </View> ); } }
  14. 40.

    import React from 'react'; import { View, Text } from

    'react-native'; class HelloUser extends React.Component { render() { return ( <View> <Text> Hello, {this.props.name} </Text> </View> ); } }
  15. 41.

    import React from 'react'; import { View } from 'react-native';

    import HelloUser from './HelloUser'; class HelloApp extends React.Component { render() { const { user } = this.props; return ( <View> <HelloUser name={user.name} /> </View> ); } }
  16. 43.

    class AccountModule extends ReactContextBaseJavaModule {
 AccountModule(ReactApplicationContext reactContext) {
 super(reactContext);
 }


    
 @Override
 public String getName() {
 return "AccountBridge";
 }
 
 @Override
 public Map<String, Object> getConstants() {
 return Collections.emptyMap();
 } @ReactMethod
 public void setUserLocation(String location) {
 currentUser.setLocation(location);
 }
 
 @Subscribe
 public void loginStatusChanged(AuthStateEvent lse) {
 ReactApplicationContext context = getReactApplicationContext();
 context.getJSModule(RCTDeviceEventEmitter.class)
 .emit("airbnb.accountUpdated", toWritableMap(getData()));
 }
 }
  17. 44.

    class ReactAirImageManager extends SimpleViewManager<ReactAirImageView> {
 @Override
 public String getName() {


    return "RCTImageView";
 }
 
 @Override
 protected ReactAirImageView createViewInstance(ThemedReactContext context) {
 return new ReactAirImageView(context, null);
 }
 
 @ReactProp(name = "src")
 public void setSource(ReactAirImageView view, @Nullable ReadableArray sources) {
 view.setSource(sources);
 }
 
 @ReactProp(name = "borderColor", defaultInt = Color.TRANSPARENT, customType = "Color")
 public void setBorderColor(ReactAirImageView view, int borderColor) {
 view.setBorderColor(Color.RED);
 } }
  18. 47.