Dev Standards
  • Untitled
  • project-standards
    • project-success
      • index
      • production.s
    • taking-over-project
      • index
      • migrate-to-new-ios-certificates.mo
    • technical-agility
      • react-native-test.s
      • code-vocabulary-identical-business-vocabulary.s
      • under-15-minutes-project-installation.s
      • index
      • up-to-date-dependencies.s
  • react-native
    • react
      • get-element-size-or-position-with-onLayout.mo
      • binding-functions-in-react-component.s
      • enable-overflow-android.mo
    • setup
      • setup-code-push.mo
      • setup-facebook-login.mo
      • setup-and-deploy-new-project-to-staging.mo
      • add-cocoapods.mo
      • deploy-script.mo
      • setup-and-deploy-new-project-to-staging-with-hockeyapp.mo
      • add-native-module.mo
      • setup_firebase_multiple_envs.mo
      • remove-unnecessary-android-permissions.mo
      • deploy-to-production-android.mo
      • deploy-project-to-production
      • overriding-existing-app.s
      • patch-react-native-android.mo
      • setup-stripe-dev-standard.mo
    • features
      • icomoon.mo
      • lock-device-orientation.mo
      • clean-logout.s
      • deep-linking
      • offline-redux.mo
      • asyncstorage.mo
      • offline-mobx.mo
    • debugging
      • analyse-bug.mo
      • debug-network-calls.mo
      • debug-javascript-ios-device.mo
      • get-ios-logs.mo
      • debug-javascript.mo
      • handle-gradle-dependencies-clash.mo
      • debug-native-ios.mo
      • debug-two-ios-apps-simultaneously.mo
      • debug-native-android.mo
      • debug-webviews.mo
    • firebase
      • debug-events.mo
    • architecture
      • project-architecture.s
      • default-stack.s
      • file-naming.s
    • update
      • upgrade-react-native.mo
    • tests
      • setup-detox-jest.mo
    • use_http_links_in_react_native.mo
    • react-navigation
      • unmount-compoenent-on-page-change.mo
    • package-dependencies
      • handle-dependencies-with-yarn-override.mo
    • animations
      • react-native-animations.s
  • successful-sprint
    • coding
      • plan-your-ticket-to-improve-efficency.s
  • code-quality
    • components-state-testing.mo
    • mock-with-jest.mo
    • pull-request-template.s
    • pull_request_template
    • test-files-indentation.s
  • security
    • import_certificates_match.mo
    • 2FA.mo
  • contributing
    • contributing.mo
    • mo.s
    • standard.s
  • backend
    • graphql-js
      • getting-started-with-apollo-server-dataloader-knex.mo
    • node-js
      • handle-errors-and-exceptions-in-javascript.s
      • add-multiple-environments-configuration-on-loopback.s
    • django
      • deploy-to-aws.mo
      • create-user-model.mo
      • getting-started.mo
      • create-model-and-api.mo
  • performance
    • backend
      • cache-routes-using-varnish.mo
      • serve-images-as-static-files.mo
      • minimize-number-sql-queries.mo
      • python-investigation-tools.mo
      • how-to-investigate-performance.mo
      • output-sql-alchemy-orm-query.mo
    • front
      • how-to-investigate-performance.mo
      • table-and-chart-with-good-performance.mo
      • react-native-performance.s
      • simulate-network-iphone.mo
    • performance-decision-flow.s
  • git
    • merge-or-rebase-a-branch
  • editors
    • vscode
      • setup-vscode.mo
  • ops
    • docker
      • deploy-with-https.mo
  • templates
    • mo
  • react
    • redux
      • custom-redux-form-field.mo
      • pass-props-to-container.mo
    • component.s
    • lifecycle
      • trigger-action-on-props-update.mo
  • flowtype
    • flowtype.s
  • LICENCE
  • README
  • scrum
    • timebox.s
  • SUMMARY
Powered by GitBook
On this page
  • Owner: Julien Nassar
  • Sponsor: Alexandre Moureaux
  • Prerequisites (~ 2 minutes)
  • Context
  • Steps (~ 2 minutes)
  • how to display these images:
  1. react-native

use_http_links_in_react_native.mo

Previoussetup-detox-jest.moNextreact-navigation

Last updated 7 years ago

Owner:

Sponsor:

Prerequisites (~ 2 minutes)

Context

Using HTTP links (in image sources for example) will not work on iOS devices/emulators. By default, the HTTP protocol is disabled. API calls and Image sources using HTTP protocol will not work on iOS, and no errors will be displayed.

Steps (~ 2 minutes)

Using the default configuration, the images in this page will not be displayed:

import React, { Component } from 'react'
import { View, Text, Image, TouchableOpacity } from 'react-native'


export default class Workspace extends Component {
  render () {
    return (
      <TouchableOpacity>
          <View>
          <Image
            source={{ uri: http://www.neo-nomade.com/fichier/images/espace/5519/Blissexterieur.jpeg }}
            style={{width: 50, height: 50}}
            resizeMode='contain'
          />
        </View>
      </TouchableOpacity>
    )
  }
}

The source uri uses the HTTP protocol

how to display these images:

By default iOS forbids calls using http protocol. Normally you should use secured http protocol (https), if you don't have that opportunity, you have to allow the domain using http protocol by modifying the <Project>/ios/<Project>/info.plist:

in the NSExceptionDomains section, add your domain name and permission

<key>NSExceptionDomains</key>
<dict>
    <key>localhost</key> <!-- By default, localhost is allowed to use HTTP protocol to use the debugger -->
    <dict>
        <key>NSExceptionAllowsInsecureHTTPLoads</key>
        <true/>
    </dict>
    <key>YOUR_DOMAIN.com</key> <!-- replace YOUR_DOMAIN with your domain name -->
    <dict>
        <key>NSExceptionAllowsInsecureHTTPLoads</key> <!-- Set the permission for HTTP loads (without encryption) -->
        <true/>
    </dict>
</dict>

the result is this: No image displayed :(

- [ ] Rebuild your app If you reloading your app it will not work, you modified Native code, so you need to rebuild the native part as well And it works :) and it works!

Julien Nassar
Alexandre Moureaux
using yo generator