Global Events - lazaronixon/react-native-turbolinks GitHub Wiki

Sometime you want update things on another view, you can use event emitters for that.

singleton-event-emitter.js

const EventEmitter = require('react-native/Libraries/vendor/emitter/EventEmitter')
const eventEmitter = new EventEmitter()
module.exports = eventEmitter

App.js

import React, { Component } from 'react'
import Turbolinks from 'react-native-turbolinks'
import SingletonEventEmitter from './../singleton-event-emitter'

export default class App extends Component {

  componentDidMount() {
    Turbolinks.addEventListener('turbolinksVisit', this.handleVisit)
    Turbolinks.addEventListener('turbolinksError', this.handleError)
    Turbolinks.addEventListener('turbolinksTitlePress', () => { SingletonEventEmitter.emit('someEvent') })
    Turbolinks.startSingleScreenApp({url: 'http://MYIP:9292'})
  }

  handleVisit = (data) => {
    Turbolinks.visit({url: data.url, action: data.action})
  }

  handleError = (data) => {
    alert(data.description)
  }

  render() { return null }
}

NumbersView.js

import React, { Component } from 'react'
import { FlatList, Text, StyleSheet, SafeAreaView } from 'react-native'
import SingletonEventEmitter from './../singleton-event-emitter'

export default class NumbersView extends Component {

  componentDidMount() {
    SingletonEventEmitter.addListener('someEvent', this.helloWorld)
  }

  componentWillUnmount() {
    SingletonEventEmitter.removeListener('someEvent', this.helloWorld)
  }

  helloWorld = () => {
    alert('Hello World')
  }

  get dataSource() {
    return Array.from(new Array(100), (x,i) => { return { key: `Row ${i}` } })
  }

  render() {
    return (
      <SafeAreaView style={{flex: 1}}>
        <FlatList data={this.dataSource} renderItem={({item}) => <Text style={styles.item}>{item.key}</Text>}/>
      </SafeAreaView>
    )
  }
}

const styles = StyleSheet.create({
  item: {
    padding: 10,
    fontSize: 18,
    height: 44,
  },
})
⚠️ **GitHub.com Fallback** ⚠️