Hi i was searching for a package for rendering an epub file in react native and also i found this
but i surly believe this package is not managing and developing anymore
so do you know another way to render an epub file in react-native ?
one way you can use open epub with webview , thats a little complicate ,
but another way use some epubjs-rn packge , check package , some resource of it is different and updater than futurepress/epubjs-rn ,
I Use #ottofeller/epubjs-rn , that compatible with react-native 0.62.2
You can use epubjs-rn
Example
import { Epub } from 'epubjs-rn';
...
<Epub src={"https://s3.amazonaws.com/epubjs/books/moby-dick/OPS/package.opf"}
flow={"paginated"} />
Official epubjs-rn github homepage
I was also trying to render Epub in react native app
then I got mainly packages like
epubjs
epub-rn
and a lot number of copies of both on them but any on them is not working with our latest code
then I got the working package for epub rendering into react-native name
epubjs-rn-62
to install it run the command
npm i epubjs-rn-62
it's working fine with 62,63 and more version of react
also no need to link in the current version of react native
usage
import { Epub } from 'epubjs-rn';
Then you can add the reader element in your code:
<Epub src={"https://s3.amazonaws.com/epubjs/books/moby-dick/OPS/package.opf"}
flow={"paginated"} />
to use with streamer
import { Epub, Streamer } from "epubjs-rn";
let streamer = new Streamer();
streamer.start("8899")
.then((origin) => {
console.log("Served from:", origin)
return this.streamer.get("https://s3.amazonaws.com/epubjs/books/moby-dick.epub");
})
.then((src) => {
console.log("Loading from:", src);
return this.setState({src});
});
There is no epub-creator in react-native so I created one react-native-epub-creator check it out and let me know
Related
I have simple application react native with expo.
My code is:
const html = require('./assets/web/index.html');
export default (): any => <WebView source={html} />;
Problem is that web page is loaded as pure html on android device. On IOS device it is working perfectly.
I am using react-native-webview
11.23.0
Any tips how can I fix my issue?
Google, SO and githu issues
I am trying to generate pdf and trying to download the same generated pdf in React Native Expo. I am not able to find any solution that lets me store file directly in my phone memory.The only solution i am getting is using expo-share share the generated pdf . Is there any way to do it ?
This is what my SavePDF functions look like
const SavePDF = async()=> {
const file = await printToFileAsync({
html: "Hello World",
base64: false,
})
await shareAsync(file.uri);
}
am using React Native Expo and I was browsing the web to find a way to download assets, and files to my react native project and came across with this post How to Download image in react native
When the user clicks the download button I want assets/files to be downloaded and stored inside the app not directly on the user's phone. I mean I don't want the users to view the downloaded files or delete them manually.
I just want the downloaded assets/files to be accessible by the React Native app. Am doing this to make the app work offline.
Once the users downloaded the assets/files, the app can use the downloaded assets/files. How can I accomplish that?
Thank you in advance!
If you are using expo managed workflow, then rn-fetch-blob will not work for you.
In that case, Expo File System is probably your way to go.
Firstly, install expo-file-system. See this
Next, for saving files and not letting users delete them manually, store them inside the cache-directory like this
import * as FileSystem from 'expo-file-system';
const downloadAssets = async () => {
let name = "Samplefile.jpg";
const result = FileSystem.createDownloadResumable(
url_Of_the_File_You_Want_to_Download,
FileSystem.cacheDirectory + name
);
const response = await result.downloadAsync();
if (response.status === 200) {
// File successfully saved
} else {
// Some error
}
};
To access this file in your app simple execute this function
import * as FileSystem from 'expo-file-system';
const getFiles = async () => {
const CacheDir = await FileSystem.readDirectoryAsync(
FileSystem.cacheDirectory
);
console.log(CacheDir); //Files are stored here
};
I'm running this on ios. I followed the steps here and was able to get the "Montserrat-SemiBold" font to work. I tried doing the same thing with "Source Sans Pro" but I'm getting the error "Unrecognized font family".
I've spent a couple of hours trying multiple things I found online but can't get it to work.
This is my repo => RefugeApp
p.s. I'm using VSCode
I use expo-font to use custom fonts, It's easy and straight forward.
Steps to use custom fonts with expo-font on the bare react-native project.
Install and config unimodules on iOS/Android
Configuration for iOS
Configuration for Android
Install expo-font
npm i expo-font
Setup your custom fonts on your App.js
import "react-native-gesture-handler";
import React from "react";
import { Text } from "react-native";
import * as Font from "expo-font";
class App extends React.Component {
state = {
appIsReady: false,
};
async componentDidMount() {
this.prepareResources();
}
prepareResources = async () => {
await cacheAssets();
this.setState({ appIsReady: true });
};
render() {
if (!this.state.appIsReady) {
return <Text>loading...</Text>;
}
return <Text>App</Text>;
}
}
async function cacheAssets() {
const fontAssets = cacheFonts([
{ thin: require("./assets/fonts/thin.ttf") },
{ medium: require("./assets/fonts/medium.ttf") },
{ bold: require("./assets/fonts/bold.ttf") },
]);
await Promise.all([...fontAssets]);
}
function cacheFonts(fonts) {
return fonts.map((font) => Font.loadAsync(font));
}
export default App;
Use it
<Text style={{ fontFamily: "medium" }}>App</Text>
This might be helpful if anyone using react-native-unimodules and wants to config custom fonts.
1 - download all the fonts you want (make sure its terminated in .ttf example: Arial-narrow.ttf)
2 - rename it as simple as possible eg: from piazzolla-reagular=s8.ttf to piazzolla-regular.ttf
3 - create an "assets" folder on your project (you probably already have created one)
4 - create a folder named "fonts" inside your your assets folder and paste all your downloaded (and renamed) fonts inside there
5 - create a file named "react-native.config.js" inside your project and fill the inside with this code:
module.exports = {
project: {
ios: {},
android: {}, // grouped into "project"
},
assets: ["./assets/fonts/"], // stays the same
};
6 - on your console (inside your project directory) write:
npx react-native link
this will link your project...
now, to apply your fonts on your style component use the fontFamily prop, eg:
style={{color:'#999',fontFamily:'exo2-regular'}}
hope this helps everyone whos in need of a font guide.
ps: I concat this method from various website guides around web like:
https://mehrankhandev.medium.com/ultimate-guide-to-use-custom-fonts-in-react-native-77fcdf859cf4
How do I add a custom font in React Native?
https://medium.com/#alcides.bsilvaneto/installing-custom-fonts-ttf-or-otf-on-react-native-0-60-projects-e8dafbc0dff3
No credits for me.
If you were able to do it correctly for Montserrat-SemiBold I suppose that your fonts are installed correct so I will skip this step, let's go to "Unrecognized font family" problem
You need to check font name in your system, not by name of the file, you need to open font_book in Launchpad and check font that you interested in Example image
For example the name of file IMFellEnglishSC-Regular.ttf but in the system, it could be IM_FELL_English_SC with underscores _ :)
So you need to use it like fontFamily: IM_FELL_English_SC, even if filename is different
In your case seems like fontFamily: SourceSansPro-Regular should work for you check this image
For future you could use this cool package to easy link & unlink fonts it's quite cool and simple for such things like adding custom fonts -> react-native-assets
Cheers đ¤¸ââď¸âď¸
i tried to check other app install in my react native project, I'm used module like: https://www.npmjs.com/package/react-native-check-app-install
But always got this error:
Cannot read property 'pkgName' of undefined
Here is my code:
AppInstalledChecker
.isAppInstalledAndroid('com.skype.raider')
.then((isInstalled) => {
// isInstalled is true if the app is installed or false if not
console.log('App Skype status: ', isInstalled);
});
Anyone can suggest me one way so check app install in react native (both: iOS/android)
install this
https://github.com/KjellConnelly/react-native-shared-group-preferences
and
async check() {
try {
await SharedGroupPreferences.isAppInstalledAndroid("com.farsitel.bazaar")
// IF IS INSTALL
} catch (e) {
// IF IS NOT INSTALL
}
}
Google Play considers the list of installed apps to be personal and sensitive user data.
As we are using
AppInstalledChecker
.isAppInstalledAndroid()
method for checking app installed check, for that we have to white-list the queries in manifest.xml
Reference : https://developer.android.com/training/package-visibility
<queries>
<package android:name="com.instagram.android"/>
âŚ
</queries>
For adding Queries need to upgrade build gradle version:
new default settings and features for package visibility in Android 11 that need to add  you must update your android gradle plugin version
Reference: How to fix "unexpected element <queries> found in <manifest>" error?
I have updated from 3.5.2 to 4.0.2
Now react-native-check-app-install module working as expected
Hope this is resolved!
Android
I. For app's which has deep links like 'waze://', 'mapsme://' you can use:
import { Linking } from 'react-native'
...
Linking.canOpenURL('waze://ul?ll=${latitude},${longitude}&navigate=yes')
OR
II. You can use for absolutely all apps (for example with deep links like "https://...")
https://github.com/KjellConnelly/react-native-shared-group-preferences
iOS
import { Linking } from 'react-native'
...
Linking.canOpenURL(iOS_app_URL_Scheme)
...
where iOS_app_URL_Scheme you can find via Google for each separate app. Like "waze://", "comgooglemaps://", "osmandmaps://" etc