i am currently learning react-native, very new to it.
i get the below error when i place in the styled-components style background-image: url(${img});:
Invariant Violation: "backgroundImage" is not a valid style property.
StyleSheet generated: {
"backgroundColor": "#FD5656",
"backgroundImage": "url(undefined)"
}
could one kindly advise me what i am doing wrong?
File: Login.js screen - sampleApp/rn-sample-app/screens/Login.js
import { StatusBar } from 'expo-status-bar';
import React from 'react';
import { Container, InnerContainer, ScrollArea } from './../constants/layout-styles';
import { Text, View } from 'react-native';
const Login = () => {
return(
<ScrollArea loginbkgrd={true}>
<Container>
<InnerContainer>
<View>
<Text>Login page</Text>
<Text>form</Text>
</View>
</InnerContainer>
</Container>
</ScrollArea>
);
};
export default Login;
File: layout-styles - sampleApp/rn-sample-app/constants/layout-styles.js
import styled from 'styled-components';
import { View, ScrollView } from 'react-native';
import Constants from 'expo-constants';
import { colors } from './colours';
import { img } from './../assets/images/bkgrd.png';
const StatusBarHeight = Constants.statusBarHeight;
export const Container = styled.View`
flex: 1;
padding: 25px;
padding-top: ${StatusBarHeight + 10}px;
background-color: ${colors.transparent};
`;
export const InnerContainer = styled.View`
flex: 1;
width: 100%;
align-items: center;
`;
export const ScrollArea = styled.ScrollView`
${(props) => (props.loginbkgrd == true && `
background-color: ${colors.primary};
background-image: url(${img});
`)};
`;
If you want to use a background Image, you should go with react-native ImageBackground
<ImageBackground
source={{uri: 'YOUR URL HERE'}}
style={{ flex: 1}}
>
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text>Your Contents</Text>
</View>
</ImageBackground >
Related
I try to customise the color of the spinner to green. But the color stays purple. Whatever I try to do.
So I have this:
/* eslint-disable prettier/prettier */
import { ActivityIndicator, Colors, Searchbar, withTheme } from "react-native-paper";
import { MD3LightTheme as DefaultTheme, Provider as PaperProvider } from "react-native-paper";
import { FlatList, SafeAreaView, StatusBar } from "react-native";
import React, { useContext } from "react";
import { CategoryContext } from "../../../services/category/category.context";
import { CategoryInfoCard } from "../components/category-info-card.component";
import { Spacer } from "../../../components/spacer/spacer.component";
import { colors } from "../../../infrastructure/theme/colors";
import styled from "styled-components/native";
/* eslint-disable prettier/prettier */
/* const cardGap = 16;
const cardWidth = (Dimensions.get("window").width - cardGap * 3) / 2; */
const theme = {
...DefaultTheme,
// Specify custom property
myOwnProperty: true,
// Specify custom property in nested object
colors: {
myOwnColor: "#69da55",
},
};
const colorsTheme = {
bg: "blue",
};
const SafeArea = styled(SafeAreaView)`
flex: 1;
${StatusBar.currentHeight && `margin-top: ${StatusBar.currentHeight}px`};
`;
const SearchContainer = styled.View`
padding: ${(props) => props.theme.space[3]};
`;
const CategoryList = styled(FlatList).attrs({
contentContainerStyle: {
padding: 16,
},
})``;
const Loading = styled(ActivityIndicator)`
margin-left: -25px;
background-color: colorsTheme.bg;
`;
const LoadingContainer = styled.View`
position: absolute;
top: 50%;
left: 50%;
`;
export const CategoryScreen = () => {
const { loading, error, categoryList } = useContext(CategoryContext);
return (
<SafeArea>
{loading && (
<LoadingContainer>
<Loading size={50} animating={true} style={{ backgroundColor: theme.colors.Green90 }} />
</LoadingContainer>
)}
<SearchContainer>
<Searchbar />
</SearchContainer>
<CategoryList
data={categoryList}
renderItem={({ item }) => {
//console.log("ITEMs", item);
return (
<Spacer position="bottom" size="large">
<CategoryInfoCard categoryList={item} />
</Spacer>
);
}}
keyExtractor={(item) => item.name}
/>
</SafeArea>
);
};
So I try it like:
style={{ backgroundColor: theme.colors.Green90 }}
Founded here: https://callstack.github.io/react-native-paper/theming.html
But the color of spinner stays purple. Not green.
Question: How to change the color of spinner with react-native paper?
you are trying to give a backgroundColor for ActivityIndicator which does not exist in its props
to change the color of the spinner you need to use the color prop
<ActivityIndicator animating={true} color={'red'} />
you can check this sandbox
I'm trying to use React-Navigation bottom tabs in React-Native-Web, the result is the expected in the device:
result in device
But in the web it gets like this:
result in the browser
If I inspect the page I can find the elements of main in there.
and here is the code:
src/App.js
/**
* Sample React Native App
* https://github.com/facebook/react-native
*
* #format
* #flow strict-local
*/
import React from 'react';
import {StatusBar} from 'react-native';
import {NavigationContainer} from '#react-navigation/native';
import {createBottomTabNavigator} from '#react-navigation/bottom-tabs';
import Main from './pages/Main/index';
const Tab = createBottomTabNavigator();
const App = () => {
return (
<>
<StatusBar
backgroundColor="transparent"
translucent
barStyle="light-content"
/>
<NavigationContainer>
<Tab.Navigator>
<Tab.Screen name="Main" component={Main} />
</Tab.Navigator>
</NavigationContainer>
</>
);
};
export default App;
src/pages/Main/index.js
import React, {useState, useEffect} from 'react';
import {View, Dimensions} from 'react-native';
// import api from '../../services/api';
import Company from '../../components/Company';
import {Container, Title, List} from './styles';
export default function Main() {
//...
return (
<View
style={{
display: 'flex',
flexDirection: 'column',
height: Dimensions.get('window').height,
justifyContent: 'center',
}}>
<Container>
<Title>Empresas Cadastradas</Title>
<List
keyboardShoulPersistTaps="handled"
data={companies}
keyExtractor={(item) => String(item.id)}
renderItem={({item}) => <Company data={item} />}
/>
</Container>
</View>
);
}
src/pages/Main/styles.js
import styled from 'styled-components/native';
export const Container = styled.View`
background-color: #7159c1;
padding-top: 30px;
flex: 1;
`;
export const Title = styled.Text`
font-size: 32px;
color: #fff;
font-weight: bold;
padding: 0 20px;
margin-bottom: 10px;
`;
export const List = styled.FlatList.attrs({
contentContainerStyle: {paddingHorizontal: 10},
showsVerticalScrollIndicator: false,
})`
margin-top: 20px;
`;
I've encountered the same problem, and the solution is to add index.css somewhere in your src, load it in your index.js or index.web.js, then put this:
html,
body {
height: 100%;
}
/* These styles disable body scrolling if you are using <ScrollView> */
body {
overflow: hidden;
}
/* These styles make the root element full-height */
#root {
display: flex;
height: 100%;
}
Found the solution in the following discussion:
https://github.com/react-navigation/react-navigation/issues/9187
I 'm trying to use react-responsive in a monorepos with styled-component and react-native-web.
I've a workspace like my ui lib and i define my component like that:
import styled from 'styled-components/native';
import { theme } from '#components/theme';
import MediaQuery from 'react-responsive';
interface CardProps {
children: React.ReactNode;
tag: string;
}
const Card = (props: CardProps) => {
console.log("Card -> props", props)
return (
<Container>
<MediaQuery minDeviceWidth={1000}>
<Tag>'blablabla</Tag>
</MediaQuery>
<TagContainer>
<Tag>{props.tag}</Tag>
</TagContainer>
<MainContent>{props.children}</MainContent>
</Container>
);
}
I define the style like that:
const Container = styled.View`
display: flex;
flexDirection: column;
minWidth: ${theme.width.minCard};
maxWidth: ${theme.width.maxCard};
height: ${theme.height.card};
boxShadow: 0 0 10px ${theme.colors.primaryGrey};
border: 1px solid ${theme.colors.primaryYellow};
borderRadius: ${theme.borderRadius.rectangular};
marginBottom: ${theme.margins.medium};
`;
const TagContainer = styled.View`
display: flex;
flexDirection: row-reverse;
`;
I'm trying to use this component in my react-native app located in another workspace like this:
return (
<View>
<Specialist
key={psychologist.uuid}
img={psychologist.avatar.url}
name={psychologist.fullname}
job={psychologist.job_name}
description={psychologist.description}
/>
</View>
);
Each time, I find myself blocked by this error:
however my component is indeed a functional component...
Any idea ?
the package you are using is only for react.js.
For React Native you can use
React Native Responsive Screen
example given in react-native-responsive-screen
import {widthPercentageToDP as wp, heightPercentageToDP as hp} from 'react-native-responsive-screen';
class Login extends Component {
render() {
return (
<View style={styles.container}>
<View style={styles.textWrapper}>
<Text style={styles.myText}>Login</Text>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
container: { flex: 1 },
textWrapper: {
height: hp('70%'), // 70% of height device screen
width: wp('80%') // 80% of width device screen
},
myText: {
fontSize: hp('5%') // End result looks like the provided UI mockup
}
});
export default Login;
I wanna set the activity indicator while calling the api so that the user can't do anything, the problem is when I call the api, the activity indicator doesn't include the header(using react-navigation), so while calling the api, the user is able to go back to previous screen, according to this, unexpected error is occurred.
Here are the code:
import React, { useEffect, useState } from 'react';
import { View, ActivityIndicator } from 'react-native';
const Screen1 = () => {
const [isLoading, setLoading] = useState(false);
useEffect(() => {
const fn = async () => {
setLoading(true);
const apiRes = await fetch(...);
setLoading(false);
};
fn();
}, []);
const renderIndicator = () => {
return (
<View style={{ position: 'absolute', top: 0, right: 0, bottom: 0, left: 0, alignItems: 'center', justifyContent: 'center' }}>
<ActivityIndicator />
</View>
);
}
return (
<>
<View style={{ flex: 1, backgroundColor: 'orange' }}>
{...}
</View>
{isLoading && renderIndicator()}
</>
);
}
export default Screen1;
Here the main problem is <View style={{ position: 'absolute', top: 0, right: 0, bottom: 0, left: 0, alignItems: 'center', justifyContent: 'center' }}> doesn't contain the header(react-navigation) container. I wanna the activity Indicator contains the header bar.
I can hide the standard header container and use custom header. but the requirement is to use standard header, not custom header.
I have a very simple solution for your problem is to use "Modal" Just make a component called Loader or whatever you want to name it and paste this code in it
I have used react-native-indicators but you can use react-native's ActivityIndicator if you want
Loader.js
import React, {Component} from 'react';
import {
Text,
View,
Modal,
SafeAreaView,
Alert,
ActivityIndicator,
} from 'react-native';
import {SkypeIndicator} from 'react-native-indicators';
import styles from './styles';
import {Colors} from '../../Themes';
export default class Loader extends Component {
state = {
};
render() {
return (
<Modal
animationType="none"
transparent={true}
visible={this.props.visible}>
<SafeAreaView
style={{
...styles.container,
backgroundColor:
this.props.type === 'invisible'
? `rgba(255,255,255,${1})`
: `rgba(0,0,0,${this.props.transparancy})`,
...this.props.customStyle,
}}>
<SkypeIndicator size={50} color={Colors.primary} />
</SafeAreaView>
</Modal>
);
}
}
Styles.js
import {StyleSheet} from 'react-native';
export default StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
},
});
Just import it wherever you wanna use it and use it this way
import Loader from '../../Components/Loader';
Put the <Loader/> before the last closing tag in the component
<Loader visible={this.props.signin.fetching} transparancy={0.7}/>
I am using a inapp browser using webview and readbilitywebview. it works fine in android but in ios the webview dosent display any content other than title of news and in readbilitywebview getting an error "invariant violation require native component rncwkwebview manager not found in the ui manager"
Using expo cli for development.
Webview:
import React, { Component } from 'react';
import { WebView,StyleSheet,View } from 'react-native';
import { Container, Text } from 'native-base';
import { Ionicons } from '#expo/vector-icons';
import { Header } from 'react-native-elements';
import { createAppContainer } from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';
import { NavigationActions, StackActions } from 'react-navigation';
import SimpleWebView from './webModal';
class MyWeb extends Component {
render() {
const { navigation } = this.props;
const title = JSON.stringify(navigation.getParam('title'))
const url = (navigation.getParam('url'))
return (
<View style={styles.container}>
<Header
backgroundColor="white"
/*leftComponent={<Ionicons name="md-arrow-round-back"
size={25}
onPress={() => {
alert('You tapped the button!');
}}/>}*/
centerComponent={
<Text
numberOfLines={1}
style={{
fontSize: 14,
fontWeight: 'bold'
}}>
{title}
</Text>}
rightComponent={
<Ionicons name="ios-book"
size={25}
onPress={() => {
this.props.navigation.navigate('Webview', {
url: (url),
title: (title)
});
}} />
}
/>
<WebView
source={{
uri: (navigation.getParam('url'))
}}
style={{ marginTop: 20 }}
/>
</View>
);
}
}
const MainNavigator = createStackNavigator({
Home: {
screen: MyWeb,
navigationOptions: {
header: null,
},
},
Webview: {
screen: SimpleWebView,
navigationOptions: {
header: null,
},
},
},
{
initialRouteName: 'Home',
}
);
const styles = StyleSheet.create({
container: {
flex: 1,
}
});
const Webpage = createAppContainer(MainNavigator);
export default Webpage;
Redabilitywebview
import * as React from 'react';
import { Text, View, StyleSheet } from 'react-native';
import ReadabilityWebView from "react-native-webview-readability";
import Constants from 'expo-constants';
const css =
`body {
color: #2a2a2a;
}
img, figure {
display: none;
}
h1 {
border-bottom-width: 1px;
border-color: #ccc;
padding-bottom: 3px;
border-bottom-style:solid;
font-size: 1.6em;
font-weight: bold;
letter-spacing: .05em;
}
p {
letter-spacing: .03em;
}`;
export default class SimpleWebView extends React.Component {
render() {
const { navigation } = this.props;
return (
<View style={styles.continer}>
<ReadabilityWebView
automaticallyAdjustContentInsets={true}
htmlCss={css}
url={(navigation.getParam('url'))}
title=
{navigation.getParam('title')}
/>
</View>
);
}
}
const styles = StyleSheet.create({
continer: {
flex: 1,
paddingTop: Constants.statusBarHeight
}
});
workes in android but not in ios. Iam using expo cli.