I am creating simple text input field using React native paper library. But on real android 10 device getting unknown white background to label. On ios and some android devices works fine. Below is my code
<TextInput
label={"Name"}
mode="outlined"
placeholder='Enter name'
onChangeText={(text): any => { }}
maxLength={64}
/>
Real device used: Android 10
React-native-paper version: "^4.12.2"
"react-native": "0.66.1"
Related
I am using Material UI 5.6 in a webapp that requires large viewport. I want to define a minimum screen width for the entire app such that:
If users access the app on devices with smaller width, the app should not resize beyond the defined minimum width.
If users access the app on devices with smaller width, show them a warning message that we dont fully support their device.
Is this achievable with MUI, or I need another library for this?
The first requirement is achievable through styling and media-queries and can be achievable either with plain CSS or with MUI-specific styling tools.
The second requirement can be implemented with useMediaQuery hook in several ways:
Restrict users with unsupported devices to use the app
You can wrap the entire app in a wrapper-component where you define the required min-width
const requiredWidth = useMediaQuery("(min-width:1024px)");
Then you can return UI of your App or the screen with a message that the device is not supported:
return requiredWidth ? (
{ children }
) : (
<p>We do not fully support your device </p>
);
In this case, the entire app will be unavailable for the user.
Show an alert
Another option is to use the same wrapper component and render an Alert or Snackbar which will be rendered alongside the rest of the UI of your app :
return (
<>
{children}
{requiredWidth && <AlertComponent />}
</>
);
In this case, a user will be notified about their device but still be able to use the app.
Am using Expo React Native and Native Base library,
While am trying to loop through an array to output Tabs (each user have his own number of tabs)
<Tabs>
{sectionsTabs.map(section => <Tab
heading={section.section_name}
style={{backgroundColor: '#0e0e0e'}}
>
<Text>{section_id}</Text>
</Tab>)}
</Tabs>
SectionsTabs is an array
Below is the error message am getting
I am developing an application in react native and I use some inline error messages for TextInput filed. If the validation fails, I will be showing a Text component with error message. It works correctly. But I face problem with VoiceOver on iOS. The error message is like dynamic and the focus is not switching to the error message. In android I added accessibilityLiveRegion="assertive" which switch the focus back to error Text and then reading. below is the code.
<Text style={ messageCellStyle } accessibilityLiveRegion="assertive">
{ StringUtils.process(message, props) }
</Text>
Can anyone help to to make it work in iOS VoiceOver? I would lik to read the error message when ever it shows in the UI.
I found myself looking for the same "drop in replacement" for the accessibilityLiveRegion prop today without luck. What I ended up doing was removing the prop, and rather listen to state changes with useEffect. Once the state changes I announce the text that would be inside the Text element. This worked well for me for both Android and iOS. Code example below 👇
useEffect(() => {
AccessibilityInfo.announceForAccessibility(
textStringBasedOnState(someState)
)
}, [someState])
I installed vector icons by following command :
npm install --save react-native-vector-icons
Then imported icons by this method:( I am not using expo)
import Ionicons from 'react-native-vector-icons/Ionicons';
This is the main code:
const MainTab=()=>{
const Tab = createBottomTabNavigator();
return(
<Tab.Navigator
screenOptions={({route})=>({
tabBarIcon:({color, size})=>{
let iconName;
if (route.name=='Home') {
iconName='ios-home'
}else if(route.name=='Settings'){
iconName='logo-settings'
}
return <Ionicons name={iconName} size={size} color={color} />
}
})
>
<Tab.Screen name="Home" component={Home} />
<Tab.Screen name="Settings" component={SecondPage} />
</Tab.Navigator>
)}
It's showing up question mark instead icons
How can i fix this?
follow this below link, this will give you the websites where it gets the Icons from.
https://github.com/oblador/react-native-vector-icons#bundled-icon-sets
ios-home and logo-settings are not part of Ionicons that is why you are getting ? symbol.
This issue is causing because your icon's name is not being matched up with icons in the library. Try using different icon types and names.
For your current code replacing
iconName='ios-home'
with
iconName='home'
and
iconName='logo-settings'
with
iconName='settings'
may work.
You can also try this using different icon library
import icon from fontAwesome5
<Icon name='home'/> and <Icon name='cog'/>
You can find the list of icons for fontAwesome here.
Icons are actually fonts, with pictures replacing characters. You get those symbols because the browser doesn't recognize the font, and doesn't have any printable character to go with that.
You need to drag the font into your project's public folder so the browser can download it from your server. The docs explain how here:
https://github.com/oblador/react-native-vector-icons/blob/master/README.md#bundled-icon-sets
This will allow you to use your originally chosen icon names like "ios-something"
I had the same issue but using react-native-navigation, I was getting squares with question marks inside in my navigation bar. It only affected Android, and seemingly only affected icons I tried to load using getImageSource().
What solved my issue was to uninstall the apk and add it again (apparently due to font caching, as found in a comment here: https://github.com/oblador/react-native-vector-icons/issues/1117)
The simple question mark, as others pointed out, is caused by giving an incorrect icon name.
I have started a project using 'create-react-native-app' and I can't figure out how to render .svg files. I tried all libraries for svg like react-native-svg-uri, react-native-svg-image, msvgc (converting .svg to react components with react-native-svg) and none of these helps.
Sometimes when I run app preview (with expo) on my phone it crashes instantly and sometimes it only shows loading animation - instead of showing actual .svg image.
There is no errors - it simply won't render svgs.
For example, this code shows loading animation
import SVGImage from 'react-native-svg-image';
<View style={styles.slide1}>
<SVGImage
style={{ width: 80, height: 80 }}
source={{uri:'https://fluent-panda.appspot.com.storage.googleapis.com/dumbbell.svg'}}
/>
<Text style={styles.text}>Hello</Text>
</View>
Thank you in advance!
This appears to be a problem with the react-native-svg-image library not being tested on iOS. When you use the html prop on a WebView on iOS, you can't set startInLoadingState={true}, otherwise the loading indicator never goes away. This is a behavior that has existed for a long time in react-native, see issue 542 for more information -- it's certainly not ideal though, and hopefully someone reads this and fixes it!
You can get around this by setting showWebviewLoader prop to false on the component.
<SVGImage
showWebviewLoader={false}
style={{ width: 80, height: 80 }}
source={{uri:'https://fluent-panda.appspot.com.storage.googleapis.com/dumbbell.svg'}}
/>