An extendible React <Component/> which will attempt to render source content consistently, based on the MIME type.
Using npm
:
yarn add react-native-uri-box
Using yarn
:
yarn add react-native-uri-box
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
/>
),
}}
/>
);
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. |