Does react native support base64 encoded images?

by

I think Ramsay is wrong, react native have a fully support on base64 image.
I found this

https://facebook.github.io/react-native/docs/tabbarios.html

this is a official example of how to create a iOS TabBarController, and they use a base64 image as one of the TabBar’s icon.

I think you did not specify the width and the height in the style property of the <Image/>.

I tried to use your base64 image in my React Native Playground, and it works.

demo

Usage

var base64Icon = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAwBQTFRF7c5J78kt+/Xm78lQ6stH5LI36bQh6rcf7sQp671G89ZZ8c9V8c5U9+u27MhJ/Pjv9txf8uCx57c937Ay5L1n58Nb67si8tVZ5sA68tJX/Pfr7dF58tBG9d5e8+Gc6chN6LM+7spN1pos6rYs6L8+47hE7cNG6bQc9uFj7sMn4rc17cMx3atG8duj+O7B686H7cAl7cEm7sRM26cq/vz5/v767NFY7tJM78Yq8s8y3agt9dte6sVD/vz15bY59Nlb8txY9+y86LpA5LxL67pE7L5H05Ai2Z4m58Vz89RI7dKr+/XY8Ms68dx/6sZE7sRCzIEN0YwZ67wi6rk27L4k9NZB4rAz7L0j5rM66bMb682a5sJG6LEm3asy3q0w3q026sqC8cxJ6bYd685U5a457cIn7MBJ8tZW7c1I7c5K7cQ18Msu/v3678tQ3aMq7tNe6chu6rgg79VN8tNH8c0w57Q83akq7dBb9Nld9d5g6cdC8dyb675F/v327NB6////AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA/LvB3QAAAMFJREFUeNpiqIcAbz0ogwFKm7GgCjgyZMihCLCkc0nkIAnIMVRw2UhDBGp5fcurGOyLfbhVtJwLdJkY8oscZCsFPBk5spiNaoTC4hnqk801Qi2zLQyD2NlcWWP5GepN5TOtSxg1QwrV01itpECG2kaLy3AYiCWxcRozQWyp9pNMDWePDI4QgVpbx5eo7a+mHFOqAxUQVeRhdrLjdFFQggqo5tqVeSS456UEQgWE4/RBboxyC4AKCEI9Wu9lUl8PEGAAV7NY4hyx8voAAAAASUVORK5CYII=';

and use in this way

<Image style={{width: 100, height: 50, resizeMode: Image.resizeMode.contain, borderWidth: 1, borderColor: 'red'}} source={{uri: base64Icon}}/>

More Related Contents:

  1. Conditional Text Rendering in React Native
  2. React Native version mismatch
  3. React navigation goBack() and update parent state
  4. Render HTML in React Native
  5. How to build .ipa application for react-native-ios? [closed]
  6. React Native: Possible unhandled promise rejection
  7. React-native fetch() from https server with self-signed certificate
  8. React Native error: “Could not determine java version from ‘9.0.1’.”
  9. react-native-fbsdk error: No resource found that matches the given name: attr ‘android:keyboardNavigationCluster’
  10. Want to share multiple images with separate caption to each image Whatsapp, react native share
  11. React Native Error: ENOSPC: System limit for number of file watchers reached
  12. How to navigate between different nested stacks in react navigation
  13. Unable to resolve module ‘AccessibilityInfo’, when trying to create release bundle
  14. componentWillMount is deprecated and will be removed in the next major version 0.54.0 in React Native
  15. ES6, how can you export an imported module in a single line?
  16. FlatList inside ScrollView doesn’t scroll
  17. How to make Metro (React Native packager) ignore certain directories
  18. Renaming a React Native project?
  19. FlatList calls `onEndReached` when it’s rendered
  20. Invariant Violation: requireNativeComponent: “RNSScreen” was not found in the UIManager
  21. React-native: How to control what keyboard pushes up
  22. KeyboardAvoidingView not Working Properly
  23. React-Native, Scroll View Not Scrolling
  24. React Native Android Build Error MainActivity.java:29: error: cannot find symbol
  25. react native get TextInput value
  26. However, this package itself specifies a `main` module field that could not be resolved
  27. emulator-5554 unauthorized for adb devices
  28. React Native – React Navigation transitions
  29. JSON Parse error: Unrecognized token’
  30. Call child function from parent component in React Native

Leave a Comment