I'm trying to render svg file path from #dicebear/avatars
let svg = createAvatar(style, {
seed: 'random',
// ... and other options
});
svg variable has this value =
But when i try to render in react-native is not showing even if i use a library called react-native-render-html
I'm trying to render using the library like this
<View style={styles.container}>
<HTML source={{ html: svg }} />
<StatusBar style="white" />
</View>
When i do this this is what i get[
You can do this using react-native-svg.
Steps:
Install the library using npm install react-native-svg
Rebuild the app after clearing the cache.
Now use the XML like
import React from 'react';
import {createAvatar} from '#dicebear/avatars';
import * as style from '#dicebear/avatars-identicon-sprites';
import {SvgCss} from 'react-native-svg';
const xml = createAvatar(style, {
seed: 'custom-seed',
});
export default function App() {
return <SvgCss xml={xml} width="100%" height="100%" />;
}
Related
When internet access is on, useAssets returns the localUri as expected. But after going offline, it returns undefined. Even the cached file still exists in the cache folder, it does not reference it. The code is below:
import React from "react";
import { useAssets } from "expo-asset";
import { Image, View } from "react-native";
export default function Avatar({ imageUrl}) {
const [assets, error] = useAssets([imageUrl]);
return (
<View style={[styles.avatar, style]}>
<Image
source={{
uri: assets[0].localUri
}}
/>
</View>
);
}
So I want to access downloaded and cached images offline with useAssets hook but it seems that expo-assets has not such feature, isn't it?
You need to install the 'expo-asset' package.
expo install expo-asset
I have an image slider component to display images from my Firebase database as follows ,
import React from 'react';
import Swiper from 'react-native-swiper';
import { View, StyleSheet, Image } from 'react-native'
const ImageSlider = ({images}) => {
return (
<Swiper autoplayTimeout={5}
style={styles.wrapper}
showsButtons={false}
loadMinimal={true}
showsPagination={true}
paginationStyle={styles.paginationStyle}
activeDotStyle={styles.activeDotStyle}
dotStyle={styles.dotStyle}
loop={true} autoplay={true}
>
{images.map((data, index) => {
return (
<View key={index} style={styles.slider}>
<Image style={styles.itemImage} source={{ uri: data }} />
</View>
)
})}
</Swiper>
)
}
For test above component I used follwing test file ,
import React from 'react';
import renderer from 'react-test-renderer';
import ImageSlider from '../../../src/components/imageSlider/ImageSlider';
test('renders correctly', () => {
const tree = renderer.create(<ImageSlider />).toJSON();
expect(tree).toMatchSnapshot();
});
When I'm run npm test command and after I got following error
TypeError: Cannot read property 'map' of undefined
Can anyone help me to slove this problem , Thank you
In your test, you're creating an ImageSlider without any parameters:
<ImageSlider />
In ImageSlider, you try to map the property images:
images.map( //etc
Because you didn't pass in an images parameter/property, images is undefined when you try to map it. To solve, this pass in value for images in your test:
<ImageSlider images={YOUR_TEST_IMAGES_DATA}/>
The other option is to redesign ImageSlider so that it fails gracefully if images is undefined. But, then there wouldn't be much a point in doing the test (unless the test was to see what happens if no parameter is passed in)
I have seen this issue posted on stack overflow many times with no clear answer. I'm hoping this question can help me and others out.
I wish to render a URL in react native using react-native-webview
I started a blank react native project using expo init my-app. I ran npm i react-native-webview and react-native link react-native-webview. I then created a file defined as the following
import React, { Component } from 'react';
import { WebView } from 'react-native-webview';
class WebViewTest extends Component {
render() {
return (
<WebView
source={{ uri: 'https://www.google.com/' }}
style={{ marginTop: 20, width: 400, height: 400 }}
/>
);
}
}
export default WebViewTest;
My app.js imports and renders that file like the following
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import WebViewTest from './Components/WebViewTest';
export default function App() {
return (
<WebViewTest />
);
}
I test this code by running expo start and I open up my project in a web browser.
I then see the following in the browser
I don't get any errors or warnings so where am I going wrong?
As Per The Expo Docs For WebView -
https://docs.expo.io/versions/latest/sdk/webview/
https://www.npmjs.com/package/react-native-webview
It Doesn't Work On Web Using EXPO
Code:
import { ImageBackground,StyleSheet } from 'react-native';
function WelcomeScreen(props) {
return (
<ImageBackground
style={styles.background}
source={require("../assets/background.jpg")}
></ImageBackground>
);
}
const styles = StyleSheet.create({
background:{
flex: 1
}
});
export default WelcomeScreen;
Output:
To explain why:
import * as React from 'react';
fixed your problem...
You are not using just plain JavaScript in this file.
Anything that looks like a HTML tag e.g. <ImageBackground> is JSX and needs to be transpiled to plain JavaScript by babel (or some other transpiler).
Your transpiler needs use the React library for JSX and therefore any files using JSX require this import.
I have been trying to open a pdf file using react native, but every library that I try generates an error. I tried the code below:
import React, { Component } from 'react';
import Pdf from 'react-native-pdf';
class OpenBGReport extends Component {
render() {
const source = {uri:'http://samples.leanpub.com/thereactnativebook-sample.pdf',cache:true};
return (
<View style={styles.container}>
<Pdf
source={source}
onLoadComplete={(numberOfPages,filePath)=>{
console.log(`number of pages: ${numberOfPages}`);
}}
onPageChanged={(page,numberOfPages)=>{
console.log(`current page: ${page}`);
}}
onError={(error)=>{
console.log(error);
}}
style={styles.pdf}/>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'flex-start',
alignItems: 'center',
marginTop: 25,
},
pdf: {
flex:1,
width:Dimensions.get('window').width,
height:Dimensions.get('window').height,
}
});
export default OpenBGReport;
However, after installing react-native-pdf, my project stop working and returns: null is not an object (evaluating 'rnfetchblob.documentdir')
What is the best way to open and display a pdf from a URL in react native?
Thanks
Expo doesn't support installing native modules and react-native-pdf is a native module. Possible solutions:
If you really want to use native modules, you should use react-native-cli or eject expo project. You can find a more detailed answer in the repository FAQ section (https://github.com/wonday/react-native-pdf#faq).
You can always open PDF files in the phone browser by using react-native's Linking API.
There is a package to display PDF files in expo projects (https://github.com/xcarpentier/rn-pdf-reader-js). Never used the package, and it also seems very sketchy as it supports only the Android platform, and on iOS, you would need to use WebView to display pdf. Also, it doesn't have a lot of downloads on npm and the project itself is prettry stale.
You can use <WebView/> from "react-native-webview" (https://github.com/react-native-webview/react-native-webview)
I tested this one on ios with expo, and it's work!
<WebView
originWhitelist={['*']}
source={{uri: uri}}
url can be a web link or path to your file local ('file:///...')
The best way I found to handle PDF files with Expo is to use buffer to turn them into base64 files, store them in the FileSystem and Share them:
import { Buffer } from "buffer";
import * as FileSystem from "expo-file-system";
import * as Sharing from "expo-sharing";
res = await // fetch PDF
const buff = Buffer.from(res, "base64");
const base64 = buff.toString("base64");
const fileUri =
FileSystem.documentDirectory + `${encodeURI("name-of-the-pdf")}.pdf`;
await FileSystem.writeAsStringAsync(fileUri, base64, {
encoding: FileSystem.EncodingType.Base64,
});
Sharing.shareAsync(res);
Note: You need to install buffer, expo-file-system and expo-sharing