Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Building Stellar User Experiences with React Na...

Building Stellar User Experiences with React Native

Alexander Kotliarskyi

July 12, 2017
Tweet

More Decks by Alexander Kotliarskyi

Other Decks in Programming

Transcript

  1. iOS Developer Web Developer React ❤ React Native Core Team

    (3 years) Building apps with RN (F8, Oculus) Alex Kotliarskyi @alex_frantic
  2. class TaskDetails extends React.Component { 
 props: { id: string

    }; 
 state = { data: null }; 
 
 componentDidMount() { 
 fetch(`/tasks?id=${this.props.id}`) 
 .then(response => response.json()) 
 .then(data => this.setState({data})); 
 } 
 
 render() { 
 if (!this.state.data) { 
 return <ActivityIndicator /> 
 } else { 
 return ( 
 ... 
 ); 
 } 
 } 
 } 

  3. class TaskDetails extends React.Component { 
 props: { id: string,

    data: ?Object }; 
 state = { data: null }; 
 
 componentDidMount() { 
 fetch(`/tasks?id=${this.props.id}`) 
 .then(response => response.json()) 
 .then(data => this.setState({data})); 
 } 
 
 render() { 
 const data = this.state.data || this.props.data; 
 return ( 
 ... 
 ); 
 } 
 } 

  4. class TaskListItem extends React.Component { 
 render() { 
 return

    ( 
 ... 
 <TouchableHighlight onPressIn={this._startPrefetching}> 
 ... 
 </TouchableHighlight> 
 ... 
 ); 
 } 
 } 
 500ms
  5. function Button(props) { 
 return ( 
 <TouchableOpacity onPress={props.onPress}> 


    <Text style={styles.blue}> 
 {props.caption} 
 </Text> 
 </TouchableOpacity> 
 ); 
 } 

  6. Experience it on a real device Animation and gestures are

    essential tools Go beyond what frameworks provide