I need to drop shadow option to add to buttons in the Android app.
In react, native default options (shadowColor, shadowOpacity, shadowRadius) only work with ios versions. Android only work with elevation option.
Does anyone know how to do this? I used react-native-shadow but it older on not supported to latest react native versions it got errors from SVG component even we installed it manually.
You can use the React Native Platform module to set an OS-specific style. For example:
import { Platform, StyleSheet } from 'react-native';
// your component //////
const styles = StyleSheet.create({
button: {
// cross-platform css
...Platform.select({
ios: {
shadowColor: rgba(0,0,0),
shadowOpacity: 0.5,
shadowRadius: 5
},
android: {
elevation: 5
},
}),
}
})
In react-native, you should avoid writing platform specific code.
When required to handle tasks like this - you should use an existing library or create your own.
react-native-drop-shadow is a good example of one of these cases. Or you could use a similar method to the one I have used in my app and just include the elevation and shadow styles in a single style object.
No External Library Required:
elevation: 5, // Android
shadowColor: '#030002', // Android, iOS & Web
shadowOpacity: 0.25, // iOS & Web
shadowRadius: 5 // iOS & web
Try to use below library:
https://github.com/Kishanjvaghela/react-native-cardview
It will fulfill your requirements
Related
this one has been asked a bit here and around the web, but it seems every case is different. On a brand new Expo app, I can reliably crash it on Android (iOS is fine) with the following code:
export default function App() {
const imageSource: ImageSourcePropType = [
{
scale: 1,
uri: 'https://storage.googleapis.com/flwc-app-media/audio-speakers/2022-08/jessie.png?X-Goog-Algorithm=GOOG4-RSA-SHA256&X-Goog-Credential=nodejs-api%40flwc-production.iam.gserviceaccount.com%2F20220916%2Fauto%2Fstorage%2Fgoog4_request&X-Goog-Date=20220916T104214Z&X-Goog-Expires=1800&X-Goog-SignedHeaders=host&X-Goog-Signature=5fed1e5a71c1f4f36779adc528223badbff3cb8681608146e60fbee189d551be19daf2abe470a3df3e7bbe4c71c26d4a465e85486124a2fba93b5858d5d9b6e97e5b004fc25ce516f288ba1667ea98d7792c78d92f4857642dfe108b84ae9f66252154e6c8d6b049a30ec1322faf121e3f1f8d9384f1108ff18838ebf657efcf9ed9b9bb609b6e1de5e4c606738b0914df1464f1192b60b7713018bbfcac002ea82690ce501dc9c09eac7de80a1fcaa75d0b8b8effd5f1733aeee217089ab9636a9d7c691b776c7af22ff3ec8417f8d09369d8e9569775d77cc7626bf5702de1cbaaef955ac4aa7470b1b8582478a7967df6e342657b8a9d608d561d13d6a364',
},
{
scale: 2,
uri: 'https://storage.googleapis.com/flwc-app-media/audio-speakers/2022-08/jessie%402x.png?X-Goog-Algorithm=GOOG4-RSA-SHA256&X-Goog-Credential=nodejs-api%40flwc-production.iam.gserviceaccount.com%2F20220916%2Fauto%2Fstorage%2Fgoog4_request&X-Goog-Date=20220916T104214Z&X-Goog-Expires=1800&X-Goog-SignedHeaders=host&X-Goog-Signature=2e1569010bf6dd29095548719a5d0d104123c105c7aaa278c0cd7d4c46f7df2ba00075a755913ed0014b2365784a3b4390bd11a2e7a59ddb11e6a9d1df2aaf974c3a6c7a0fb1a5a0b236b6f73d43a364fa38a5bd627417253042224312c9ca483b37ae78b2115ecd1f5badad1603862c287d3309dfb3fd2d85058234889e0483c49261c05d46acb8784a521c5326a9a636233efbdb9033b6e27156bce5ca9be9a9a1d036ea5f651f5b49e0dc80d35b0916c4b7c17422439ce533a1f46461679cfb64653562af20c7da136c213806f72c3f5f0501760d1657bb7dd85abae8da3ac2a79ac21322a0e4041a4a5bcc553e59bef4b1cfdff2816dc19c726a3cc1d901',
},
{
scale: 3,
uri: 'https://storage.googleapis.com/flwc-app-media/audio-speakers/2022-08/jessie%403x.png?X-Goog-Algorithm=GOOG4-RSA-SHA256&X-Goog-Credential=nodejs-api%40flwc-production.iam.gserviceaccount.com%2F20220916%2Fauto%2Fstorage%2Fgoog4_request&X-Goog-Date=20220916T104214Z&X-Goog-Expires=1800&X-Goog-SignedHeaders=host&X-Goog-Signature=69eaecd6b88c6c6c5dbbc735944d04a0233936fe4bec51607e8c023bb27fd392d2e0570cc0798b34193dbdc78c6049de3d53c4f9250f01a2f6e33062a9b95267ad45e2000f04c4df5b9de6cc6f63bc30dc52211504291689c1fc2d63888e4070151cc676d98fd333f0371c4262a45a4a7fb304de433554d5c3a288fc19cc3696c5c9137dc46aae518dbd6dbbe8894390cf68fdb13db1d12ba420cdd9bdeef6e7190c28c2346a7a1024317cfdba658be444e41446a93545049049b17cc0b257b32d51cc1be7d5dcf93d833d56a276b6a98dee6b25b65d730a50951622de5a346051a28f8c6c4c4e345f16b3233e64a91425a0e80b3664f5f0bfa96779119b6095',
},
]
return <Image source={imageSource} />
}
If passing a single-element array as ImageSourcePropType, then the crash won't happen. So, specifically on Android, a multi-element array as image source makes the app crash.
Any clue what it could be?
Answering my own question: I've filled a React Native issue, and was told this is the intended behavior, as width and height are required when loading files from the network. I'm not sure why the single-element array doesn't cause a crash, nor why this used to work just fine under React Native 0.65, but the solution is to specific the dimensions of each image. Note that on iOS this works fine even without image dimensions.
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 🤸♂️☀️
How can I use this: https://www.npmjs.com/package/react-native-android-pip
I want to make a webview app can use PIP(Picture in Picture). But Idk how can I use this module in my code.
import * as React from 'react';
import { WebView } from 'react-native-webview';
import AndroidPip from 'react-native-android-pip';
export default class App extends React.Component {
render() {
return <WebView source={{ uri: '(My url)' }} style={{ marginTop: 50 }} />;
}
}
As said here (On the documentation itself), You can use as follow:
import AndroidPip from 'react-native-android-pip';
// Enter Pip mode
AndroidPip.enterPictureInPictureMode()
//Configure aspect ratio, works only on SDK version 26 and above
AndroidPip.configureAspectRatio(width, height)
// When enabled, PIP mode will be automatically entered when app is unfocused( User presses home
//, menu button etc)
AndroidPip.enableAutoPipSwitch()
AndroidPip.disableAutoPipSwitch()
You can call these functions on the click of a button, response of an API, start of a screen, and so on...
[EDIT]
Also, try using the github version of this module, as the npm version is 2 years old, and the github version is at 29 days without an update. Install it as follow:
npm install --save https://github.com/shaun-chiang/rn-android-pip
If you like there is an easier pilgrimage react-native-pip-android
I'm trying to load a custom font from my assets folder within my project. I've looked up online and so far after doing all the steps, I'm still faced with the same issue.
I've added the source of the fonts into my package.json file like this:
"rnpm": {
"assets": [
"./assets/fonts/"
]
}
I've imported expo-font into my project as well, and I'm simply calling the fontFamily like this:
<Text style={{ textAlign: 'center', fontFamily: 'Montserrat-Regular', fontSize: 20 }}>Home</Text>
am I missing something?
EDIT: I forgot to mention that I'm using a custom font in another screen, the exact same way...yet this screen is giving me issues.
The files I am using are Montserrat-Regular.tff, Montserrat-Bold.tff, and Montserrate-Light.tff
The path for these files are MyProject/assets/fonts/MyFonts.ttf
You don't have an Android folder, so it looks like you're using Expo, not React Native.
So I'll show you how to do Expo.
Take the Open Sans zipfile that you downloaded, extract it and copy
Montserrat-Regular.ttf into the assets directory in your
project. The location we recommend is your-project/assets/fonts.
and you can run expo install expo-font
Add the following import in your application code in App.js: import * as Font from 'expo-font';
The expo library provides an API to access native functionality of
the device from your JavaScript code. Font is the module that deals
with font-related tasks. First, we must load the font from our
assets directory using Font.loadAsync(). We can do this in the
componentDidMount() lifecycle method of the App component. Add the
following method in App: Now that we have the font files saved to
disk and the Font SDK imported, let's add this code:
export default class App extends React.Component {
componentDidMount() {
Font.loadAsync({
'Montserrat-Regular': require('./assets/fonts/Montserrat-Regular.ttf'),
});
}
// ...
}
This loads Open Sans Bold and associates it with the name 'Montserrat-Regular' in Expo's font map. Now we just have to refer to this font in our Text component.
Note: Fonts loaded through Expo don't currently support the fontWeight or fontStyle properties -- you will need to load those
variations of the font and specify them by name, as we have done here
with bold.
Check your Info.plist file from the iOS folder and looking for a UIAppFonts key, you should see something similar to:
<key>UIAppFonts</key>
<array>
<string>Montserrat Regular.ttf</string>
</array>
Also, your style will be like this;
fontFamily: "Montserrat", instead fontFamily: "Montserrat-Regular".
I managed to fix the issue I was having. It seems I needed to give the app a moment to load the font, still not sure why this was giving me the issue, but here is what my working code looks like now in case anybody else is having the same problem
This is the code I added into the screen in which I was trying to load my custom font.
constructor(props) {
super(props);
this.state = {
fontLoaded: false
}
}
async componentDidMount(){
await Font.loadAsync({
'Montserrat': require('../assets/fonts/Montserrat.ttf'),
}).then(() => {
this.setState({fontLoaded: true})
})
}
<View>
{ this.state.fontLoaded == true ? (
<Text style={{ fontSize: 40, fontFamily: 'Montserrat', color:'white', marginLeft: 10}}>Home</Text>
) : (<Text> Loading...</Text>)
}
</View>
I'm trying to get the name of the publisher to display on top of the video stream (on both the Publisher's and Subscriber's ends) using the OpenTok React Native package.
According to the documentation for the OTPublisher component, it should be just a matter of passing in the name key as one of the properties.
I've tried adding name to the properties and passing that through to the OTPublisher component, but it won't show up on the Publisher or the Subscriber. Do I need to do something else?
Here is the sample code I'm working with:
class App extends Component {
constructor(props) {
super(props);
this.publisherProperties = {
publishAudio: false,
cameraPosition: 'front',
name: 'Test Name'
};
this.publisherEventHandlers = {
streamCreated: event => {
console.log('Publisher stream created!', event);
},
streamDestroyed: event => {
console.log('Publisher stream destroyed!', event);
}
};
}
render() {
return (
<OTSession apiKey="your-api-key" sessionId="your-session-id" token="your-session-token">
<OTPublisher
properties={this.publisherProperties}
eventHandlers={this.publisherEventHandlers}
style={{ height: 100, width: 100 }}
/>
</OTSession>
);
}
}
TokBox Developer Evangelist here.
The OpenTok React Native library renders native views that are powered by the OpenTok iOS and Android SDKs. These mobile SDKs do not support the rendering of the video with the name superimposed on top of it, that is currently only available using the OpenTok JS SDK.
If you subscribe to the same session on the web (you can test it using the OpenTok Playground tool), you would see that setting the name property works.