I would like to load website from local file in my RN expo app.
My code is:
/* eslint-disable global-require */
import * as React from 'react';
import { WebView } from 'react-native-webview';
export default (): any => (
<WebView
source={require('./web/index.html')}
javaScriptEnabled
domStorageEnabled
originWhitelist={['*']}
allowFileAccess
allowUniversalAccessFromFileURLs
allowFileAccessFromFileURLs
mixedContentMode="always"
/>
);
During the run I am getting an error:
Error: 'web/style.css' cannot be loaded as its extension is not registered in assetExts
And styles doesnt works.
What is wrong?
Related
all,
I am new to react native, I am now having issue when I was trying to use customize fonts for my application, it keeps giving me error: None of these files exist: * assets\fonts\ARIAL.TTF etc.
I appreciate if anyone can help me, thank you so much.
I am using expo to run my project, and I install expo-font(v 10.0.4) to use costomize font. Here is my code of using the fonts:
import { Provider } from 'react-redux'
import { PersistGate } from 'redux-persist/integration/react'
import AuthStack from './routes/authStack'
import store, { persistor } from './store'
import { useFonts } from 'expo-font'
import Loading from './components/loading'
function App() {
const [fontLoaded] = useFonts({
Arial: require('./assets/fonts/ARIAL.TTF'),
ArialBold: require('./assets/fonts/ARIALBD.TTF'),
BlairMd: require('./assets/fonts/BlairMdITCTTMediumFont.ttf'),
})
console.log('app font loaded====', fontLoaded)
return fontLoaded ? (
<Provider store={store}>
<PersistGate loading={null} persistor={persistor}>
<AuthStack />
</PersistGate>
</Provider>
) : (
<Loading />
)
}
So I am using useFonts hook from expo-font to load my fonts, and I already put my fonts file under assets, here is the file structure:
assets folder is under the same directory as App.js. In assets folder, there is fonts folder, and in fonts folder, all my fonts files are there
If anyone can help me, thank you so much
I had the same issue, it is resolved after stop and rerun the server.
I guess expo server needs to execute again in order changes to take place.
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%" />;
}
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
I spent a lot of time finding the solution for this question but I couldn't find the perfect answer for this.
This is header.js file
I am getting "Unable to resolve path to module './src/somponents/header' (import/no-unresolved)" in this file.
// Import Libraries to make components
import React from 'react';
import { Text } from 'react-native';
// Make a component
const Header = () => {
return <Text>Albums</Text>;
};
// Make the component available to the other parts of the app
export default Header;
This is index.android.js file
I am getting "Unexpected block statement surrounding arrow body" in this file near const App = () => (
// Importing the libraries
import React from 'react';
import { AppRegistry } from 'react-native';
import Header from './src/somponents/header';
// Creating a component
const App = () => (
<Header />
);
// Rendering the component
AppRegistry.registerComponent('albums', () => App);
I am totally new to React Native. Please help me solve this error.
Thank You