kiok46

modify_color_of_tabs

Change the Color of Custom tabs when they change.

• handleTabNavigation method that changes the state which leads to re-render the UI and hence the colors.

  handleTabNavigation = (route, idx) => {
      if (this.state.storiesTabOpen && idx === 0 || this.state.searchTabOpen && idx === 1){
          this.setState({ searchTabOpen: !this.state.searchTabOpen,

kiok46

I will do complete surgery of this interesting View i.e FoldView. To me it's a incredible learning source about Animations.

Following the readme file in the project

git clone https://github.com/jmurzy/react-native-foldview

cd react-native-foldview/examples/Simple
npm install

kiok46

Keybase proof

I hereby claim:

• I am kiok46 on github.
• I am kiok46 (https://keybase.io/kiok46) on keybase.
• I have a public key ASBneeFrN7L5ASRWPm-ScF9SSehmvEfoKlE-ZGfcwNlovAo

To claim this, I am signing this object:

kiok46

CustomDrawer

In order to figure it out I searched react-navigation issues and found this

export default DrawerNavigator(
  {
 Map: {

kiok46

So now that I am familiar with expo and have made a lot of projects using it, it's time to start with Ignite and reactatron, both created by InfiniteRed who are awesome developers and recently organised a conference Chain React 2017 , which is awesome.

Along with these I will start with Redux-Persist, Redux-Saga, reduxsauce and will try to understand indepth the default boilerplate app generated using ignite cli.

Cool!

kiok46

Content of the Gist is from a talk by Peggy Rayzis at Chain React 2017: Chain React 2017: Breaking Down Bridging in React Native by Peggy Rayzis

---

In order for a native code to talk to JS you would need a bridge.

• You need to integrate a third-party SDK.
• High perfomance is crutial
• You are building a brownfiel app
• You need access to a platform to a platform API. (Camera, Gyroscope etc.), You will need to use a opensource library or create a bridge.

kiok46

Store

It is one giant Javascript object, it behaves like multiple stores but it's only one. for example: We have to do list, favourites and bla bla.

The single store(Javascript object) would have a todo-list property, a favourites property and all.

The store is immutable, cannot change only create a brand new store object

We never change this object we just create new versions of this object. So we have a history of exact state of your

kiok46

React-Native-Action-Button

I will be tearing apart each and every important line in the React-Native-Action-Button npm packagem because it has got a lot of concepts that are important and a "must know".

altighty then, let's get started.

PropTypes (prop-types)

Runtime type checking for React props and similar objects. It will check props passed to your components agains

kiok46

Animations

3 main questions that needed to be answered.

• Where is the item right now? (Use Animated.ValueVY)
• Where is it the element moving to? (Use Animated.Spring)
• Which element are we moving? (Use Animated.View)

Animations run compeltely outside the state system.)

kiok46

Snapping Header

import React, { Component } from 'react';
import {
  View,
  Animated,
  PanResponder,
  ActivityIndicator,
  StyleSheet