State Of The Codebase

October 2017

• There is some basic aksonov/react-native-router-flux (RNRF) working, but not in a maintainable well architected way. RNRF recommends setting up a store that captures each routing, and listeners in each scene to detect and act on the changes. Also look at RNRF's newish NavigationStore ... that might replace Actions.
• In iOS we are getting a stream of nw_connection_get_connected_socket <number> Connection has no connected handler This appears to be a iOS 10 error. It also seems to be dramatically slowing down the simulator see react-native issue 10027 or it might be a simulator issue
• We need to convert all those react-router calls, to RNRF.
• Debugging iOS and Android:
  Currently iOS can run with local python server or the production python server, Android can only run with the production server, it has problems with localhost. Clearly this can be fixed, but hasn't been yet.
• The react-native-oauth project is behind on merging pull requests, so we are currently building from Steve's fork. These changes are coming in queued up pull requests, but haven't been merged yet. Once all the changes are in, we can switch over to the released npm version.
• Notes about the Facebook login There are four components to the Facebook SDKs for iOS, that are entirely or mostly finalized by "pod install"

  pod 'react-native-fbsdk',      :path => '../node_modules/react-native-fbsdk/ios'
  pod 'react-native-fbsdkcore',  :path => '../node_modules/react-native-fbsdkcore'
  pod 'react-native-fbsdklogin', :path => '../node_modules/react-native-fbsdklogin'
  pod 'react-native-fbsdkshare', :path => '../node_modules/react-native-fbsdkshare'
  

react-native-fbsdkcore, react-native-fbsdklogin, react-native-fbsdkshare are npm installed modules that are linked into the iOS app by pod install of the Podfile, and are components of the The Facebook SDK for iOS. Additionally there is a wrapper component for react-native called react-native-fbsdk that can be troublesome to install. The c language code for iOS exports the names of API calls that JavaScript can access in c through the bridging code, you will see code like RCT_EXPORT_MODULE(FBLoginManager); on the c side, and const LoginManager = require('react-native').NativeModules.FBLoginManager; on the JavaScript side importing the api for that bridging code. If (using this example if NativeModules does not contain FBLoginManager, it means some c/ObjectiveC side library is not linked in. Hopefully the code and configuration in git that loads the Facebook API will not need to be revisited. But changes are happening in this area, and future issues may crop up.

September 2017

• react-native-oauth has been implemented for iOS for twitter, but only for the basic "happy path", we still need to handle failure to login to twitter.
• The react-native-oauth implementation is simple once it got working, but to get it working on iOS was a tough deep dive into ObjectiveC debugging, and changing some c source files (which are now in our git). It also took lots of configuration changes in XCode, those changes are captured in WeVoteReactNative.xcodeproj and WeVoteReactNative.xcworkspace. Be careful with those files!
• We decided to go with Flux Actions from 'react-native-router-flux' to do our routing which is a bit on the bleeding edge -- There are lots of breaking-news changes coming through, but the library seems promising. See Thousand Ways to Navigate in React Native and aksonov/react-native-router-flux and Pavel Askonov. As of today (9/28/17) our react-native-router-flux is only partially working for SignIn and Ballot.

    import { Actions } from 'react-native-router-flux';

    Actions.replace('ballot').call({
      sign_in_message: "You have successfully signed in with Twitter.",
      sign_in_message_type: "success"
    });

    or

    Actions.ballot.({
      sign_in_message: "You have successfully signed in with Twitter.",
      sign_in_message_type: "success"
    });

Instead throughout the code we import browserHistory from "react-router" and do something like

    import { browserHistory } from "react-router";

    browserHistory.push({
        pathname: "/more/network",
        state: {
          message: "Your accounts have been merged.",
          message_type: "success"
        }
    });

which seems to work, but it is ignoring our architectural direction -- the whole 'react-native-router-flux' (RNRF) universe as setup in WeVoteReactNative/src/js/scenes/App.js