React-native-uri-box NPM

react-native-uri-box

An extendible React <Component/> which will attempt to render source content consistently, based on the MIME type.

🚀 Getting Started

Using npm:

yarn add react-native-uri-box

Using yarn:

yarn add react-native-uri-box

✍️ Example

Just use this as a drop-in component for your remote content:

import UriBox, { LookUpTable } from 'react-native-uri-box';
import Video from 'react-native-video';

const App = () => (
  <UriBox
    style={{
      flex: 1,
    }}
    source={{
      // XXX: The content type is determined from the source.
      uri: 'http://www.cawfree.com/mapsy/img/mapsy.jpg',
    }}
    lookUpTable={{
      // XXX: The lookUpTable can be used to add support for
      //      additional MIME types.
      ...LookUpTable,
      ['video/mp4']: ({ ...extraProps }) => (
        <Video
          {...extraProps}
          resizeMode="cover"
          loop
          muted
        />
      ),
    }}
  />
);

📌 Prop Types

Property	Type	Required	Default value	Description
Component	custom	no	View	Defines the parent for your content. As an example, you could pass an `<Animated.View` to permit animation.
LoadingComponent	custom	no	ActivityIndicator	What to render whilst loading.
UnsupportedComponent	custom	no	<See the source code>	What to render if the requested MIME type is not supported.
style	shape	no	styles.container	Parent component styling. The dynamic contents will be sized to fill this .
source	union	no	null	What source to render; expects an object with a single key `uri`.
lookUpTable	shape	no	<See the source code>	Defines the table of mappings to determine which components are used for which MIME types.