shubhnik

let data = [
    'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ7n8qdJPjst1CyYg-mSjNSIu0Z1z9h1_fR4NLXTpl66Y8AJD2k',
    'https://www.zoomtaqnia.com/wp-content/uploads/2016/02/Airbnb.jpeg',
    'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTLddVLVeA4CcbX7mwyv-XollIrOOSmhRg_ept8LaIVXFIBfxsf',
    'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ8sILGVGzfpfP6xlQSN6ftnq4xA6WzKbcLr9xFAEogg36LuWwa',    'https://www.freedigitalphotos.net/blog/wp-content/uploads/2014/01/facebook-image-compression.jpg'
]

state={
        showLargeImage:false,
        imageSource:'',

shubhnik

componentDidMount(){
        Animated.parallel([
            Animated.timing(
                this.state.viewOpacity,
                {
                    toValue:1,
                    duration:100,
                    useNativeDriver:true
                }
            ),

shubhnik

import React, { Component } from 'react';
import {
  View,
  Image,
  Animated
} from 'react-native';

export default class responsiveImage extends Component {
  state={
    imageLoaded:false,

shubhnik

var ProportionalImage = React.createClass({
  getInitialState() {
    return {
      style: {}
    };
  },

  propTypes: {
    originalWidth: React.PropTypes.number.isRequired,

shubhnik

///////////////// App.js
class App extends Component {
  render() {
    return (
      <div className="App">
          <div style={{flex:1, minWidth:300, minHeight:300, backgroundColor:'green'}}>
              <div className="imageConatiner">
                <div className="imageDiv"/>
              </div>
          </div>

shubhnik

// ******************************************** applyMiddleware ********************************************
// Each code line is precedeed by its explanation.

// applyMiddlewrae function receives any number of middlewares. It is called while initiating a store.
function applyMiddleware(...middlewares) {
  
  // returns a function which accepts the "createStore" function of redux. This function in turn, returns another function
  // which accepts arguments reducer and preloadeState as in (..args).
  return (createStore) => (...args) => {
    

shubhnik

// connect() is a function that injects Redux-related props into your component.
// You can inject data and callbacks that change that data by dispatching actions.
function connect(mapStateToProps, mapDispatchToProps) {
  // It lets us inject component as the last step so people can use it as a decorator.
  // Generally you don't need to worry about it.
  return function (WrappedComponent) {
    // It returns a component
    return class extends React.Component {
      render() {
        return (

shubhnik

function mapValues(obj, fn) {
  return Object.keys(obj).reduce((result, key) => {
    result[key] = fn(obj[key], key);
    return result;
  }, {});
}

function pick(obj, fn) {
  return Object.keys(obj).reduce((result, key) => {
    if (fn(obj[key])) {

shubhnik

const AppNavigator = StackNavigator({
  login: {
     screen: login
  },
  screen1: {
    screen: Screen1
  },
  screen2: {
    screen: Logout
  }

shubhnik

// Our Navigator:
const AppNavigator = StackNavigator({
  login: {
     screen: Login
  },
  screen1: {
    screen: Screen1
  },
  screen2: {
    screen: Logout