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.

✌️ License

MIT