๐ Hi, Iโm Amine.
๐ Iโm interested in typescript, graphql, react ,react native & nodejs.
๐ฑ Iโm always learning new things.
๐จ๐ปโ๐จ 3+ years commercial experience
License: MIT License
๐ Hi, Iโm Amine.
๐ Iโm interested in typescript, graphql, react ,react native & nodejs.
๐ฑ Iโm always learning new things.
๐จ๐ปโ๐จ 3+ years commercial experience
Hi,
I am using this package. When I run the app it loads perfectly
$npm run android
When I make signed APK
npx react-native run-android --mode=release
It does not work at all.
I used the code below
/**
* Sample React Native Static Server
* https://github.com/futurepress/react-native-static-server
* @flow
*/
import React, { useState, useEffect } from 'react'
import {
StyleSheet,
Text,
View,
Image
} from 'react-native'
// requires react-native-webview, see: https://github.com/uuidjs/uuid#getrandomvalues-not-supported
// eslint-disable-next-line @typescript-eslint/no-unused-vars
//import { v4 as uuidv4 } from 'uuid'
import StaticServer from 'react-native-static-server-refined'
import RNFetchBlob from 'rn-fetch-blob'
import { WebView } from 'react-native-webview'
interface ITestViewProps {
port?: number
root?: string
file?: string
target?: any
}
export default function App (props: ITestViewProps): JSX.Element {
const [origin, setOrigin] = useState<string>('')
const [server, setServer] = useState<StaticServer>(null)
const port = typeof props.port !== 'undefined' ? props.port : 3030
const root = typeof props.root !== 'undefined' ? props.root : 'www/'
const file = typeof props.file !== 'undefined' ? props.file : 'index.html'
const target = typeof props.target !== 'undefined' ? props.target : require('./index.html')
useEffect(() => {
if (origin === '') {
// eslint-disable-next-line @typescript-eslint/no-var-requires
const index = target
const { uri } = Image.resolveAssetSource(index)
const path = RNFetchBlob.fs.dirs.DocumentDir + '/' + root
const dest = path + file
const startServer = async (): Promise<void> => {
const newServer = new StaticServer(port, root)
const origin = await newServer.start()
setOrigin(origin)
setServer(newServer)
}
const prepare = async (): Promise<void> => {
try {
await RNFetchBlob.fs.mkdir(path)
} catch (e) {
console.log(`directory is created ${path}`)
}
let added: Promise<boolean>
if (uri.includes('file://')) {
// Copy file in release
const result = await RNFetchBlob.fs.exists(dest)
if (!result) {
added = RNFetchBlob.fs.cp(uri, dest)
}
} else {
// Download for development
const result = await RNFetchBlob.config({ fileCache: true }).fetch('GET', uri)
added = RNFetchBlob.fs.mv(result.path(), dest)
}
try {
await added
} catch (e) {
console.log(e)
}
await startServer()
}
// eslint-disable-next-line @typescript-eslint/no-floating-promises
prepare()
return () => {
if (server !== null) {
server.kill()
}
}
}
}, [])
if (origin !== '') {
return <WebView
source={{ uri: `${origin}/${file}` }}
style={styles.webview}
/>
}
return <View style={styles.container}>
<Text>Loading...</Text>
</View>
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF'
},
webview: {
marginTop: 20,
flex: 1
}
})
I used the code from this link. https://github.com/futurepress/react-native-static-server/blob/master/StaticServerExample/App.tsx
My Dependencies
"dependencies": {
"react": "18.2.0",
"react-native": "0.71.2",
"react-native-fs": "^2.20.0",
"react-native-permissions": "^3.6.1",
"react-native-static-server-refined": "^0.5.0",
"react-native-webview": "^11.26.1",
"rn-fetch-blob": "^0.12.0"
},
Please check this issue and let me know how to solve this issue.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.