I am working on a React native project, I am trying to apply two different styles in View Component but it is taking only one style someone please tell me how to overcome this issue
This is App.js
import React from 'react';
import {View, Text, StyleSheet} from 'react-native';
const App = props => {
return (
<View style={{flex: 1, flexDirection: 'row'}} style={styles.container}>
<Text>Mark</Text>
<Text>Williams</Text>
<Text>Henry</Text>
<Text>Tom</Text>
</View>
);
};
const styles = StyleSheet.create({
container: {
marginTop: 0,
padding: 20,
color: '#ff0000',
},
});
export default App;
Hi try like below,
import React from 'react';
import {View, Text, StyleSheet} from 'react-native';
const App = props => {
return (
<View style={[{flex: 1, flexDirection: 'row'}, styles.container]}>
<Text>Mark</Text>
<Text>Williams</Text>
<Text>Henry</Text>
<Text>Tom</Text>
</View>
);
};
const styles = StyleSheet.create({
container: {
marginTop: 0,
padding: 20,
color: '#ff0000',
},
});
export default App;
Using a style array you can set multiple styles for a same component.
Related
I'm currently having a problem with the clickable size of a reusable button which includes an icon and text. When I run this code it seems like the entire row becomes clickable when I only want the icon and text to become clickable. Does anyone know how to solve this problem? Thanks
App.js
import { StyleSheet, Text, View, TouchableOpacity } from 'react-native';
import IconTextButton from './components/iconTextButton';
export default function App() {
return (
<View style={styles.container}>
<Text style={{marginTop: 100}}>My First React App! Sike </Text>
<IconTextButton iconFont="ionicons" iconName="pencil" iconSize={25} text="Add Items"/>
</View>
);
}
const styles = StyleSheet.create({
container: {
backgroundColor: 'powderblue',
},
});
iconTextButton.js
import React from 'react';
import { StyleSheet, TouchableOpacity, Text, View } from 'react-native';
import Ionicon from 'react-native-vector-icons/Ionicons';
export default function IconTextButton({ iconFont, iconName, iconSize, text, onPress }) {
const getIconFont = (iconFont) => {
switch (iconFont) {
case "ionicons":
return Ionicon;
}
};
const FontIcon = getIconFont(iconFont);
return (
<TouchableOpacity onPress={onPress} style={styles(iconSize).container>
<FontIcon name={iconName} size={iconSize} style={styles(iconSize).buttonIcon}>
<Text style={styles(iconSize).buttonText}>{text}</Text>
</FontIcon>
</TouchableOpacity>
)
}
const styles = (size) => StyleSheet.create({
container: {
backgroundColor: 'pink',
},
buttonIcon: {
backgroundColor: 'yellow',
width: size,
},
buttonText: {
backgroundColor: 'green'
},
})
Along with the code I've tried, I've also tried to keep and as seperate contents whilst adding a flexDirection: 'row' inside styles.container. This keeps the contents in the same line but it still makes the whole row clickable. I've also tried putting everything in a and moving the styles.container to the component and adding a height: size into styles.container. This makes the clickable component limited however, the component is hidden underneath due to the restricted height. I have also tried simply just using instead of making a reusable const that its an input. The same thing applies.
You can wrap your Icon and Text Component in a View component and then wrap it inside a TouchableOpacity Component
Try this or do something like this :
import React from 'react';
import { StyleSheet, TouchableOpacity, Text, View } from 'react-native';
import Ionicon from 'react-native-vector-icons/Ionicons';
export default function IconTextButton({ iconFont, iconName, iconSize, text, onPress }) {
const getIconFont = (iconFont) => {
switch (iconFont) {
case "ionicons":
return Ionicon;
}
};
const FontIcon = getIconFont(iconFont);
return (
<TouchableOpacity onPress={onPress} style={styles(iconSize).container}>
<View style={styles(iconSize).iconTextContainer}>
<FontIcon name={iconName} size={iconSize} style={styles(iconSize).buttonIcon} />
<Text style={styles(iconSize).buttonText}>{text}</Text>
</View>
</TouchableOpacity>
)
}
const styles = (size) => StyleSheet.create({
container: {
backgroundColor: 'pink',
},
iconTextContainer: {
flexDirection: 'row',
alignItems: 'center',
},
buttonIcon: {
backgroundColor: 'yellow',
width: size,
},
buttonText: {
backgroundColor: 'green'
},
})
I have this HomeScreen file, in it I have added Card component(Dashboard & Highlights), I have Customized the Card Components with the TitleCard to reuse the styling,
In each card there is "View All" Button to navigate to its individual Screens,
When I don't use the Cards and put the entire code in home screen and Click on the View All Button on home screen then it navigates to that page, but when I use the Cards and use its props to navigate to the link provided as forwardLink props then
I get this error
"ReferenceError: Can't find variable: navigation"
Also when I add this.props.navigation.navigate('{props.forwardLink}') in TitleCard
I get this error message:
TypeError: undefined is not an object (evaluating '_this.props.navigation')
Here are the codes for each file
TitleCards
import React from 'react';
import {StyleSheet, Text, View, TouchableOpacity} from 'react-native';
const TitleCards = props => {
return (<View style={styles.textTitlesContainer}>
<Text style={styles.textTitle}>{props.leftTitle}</Text>
<TouchableOpacity
onPress={() => navigation.navigate('{props.forwardLink}')}>
<Text style={[styles.textTitle, {color: '#F483A7'}]}>
{props.rightTitle}
</Text>
</TouchableOpacity>
</View>)
};
const styles = StyleSheet.create({
textTitlesContainer: {
flex: 1,
width: '100%',
flexDirection: 'row',
justifyContent: 'space-between',
padding: 5,
},
textTitle: {
fontSize: 20,
fontWeight: '800',
color: '#fff',
},
});
export default TitleCards;
HomeScreen
import React, {Component} from 'react';
import {
SafeAreaView,
ScrollView,
StyleSheet,
} from 'react-native';
import {CustomHeader} from '../index';
import Colors from '../constants/Colors';
import DashboardCard from './DashboardCard';
import HighlightCard from './HighlightCard';
export class HomeScreen extends Component {
render() {
return (
<SafeAreaView style={{flex: 0, backgroundColor: Colors.primary}}>
<CustomHeader
title="Home"
isHome={true}
navigation={this.props.navigation}
/>
<ScrollView style={styles.container}>
<DashboardCard />
<HighlightCard />
</ScrollView>
</SafeAreaView>
);
}
}
const styles = StyleSheet.create({
container: {
height:900, backgroundColor: Colors.mainBackground,
paddingTop:6,
},
});
export default HomeScreen;
HighlightCard
import React, {Component} from 'react';
import {Text, View} from 'react-native';
import {CustomHeader} from '../../index';
const HighlightCard = (prop) => {
return (
<Card>
<TitleCards leftTitle="Highlights" rightTitle="View More" forwardLink="Highlights">
</TitleCards>
<View>
<Text>News Feed</Text>
</View>
</Card>
);
};
export default HighlightCard;
const styles = StyleSheet.create({
textTitle: {
fontSize: 20,
fontWeight: '800',
color: '#fff',
},
});
When I use the HighlightCard codes directly in HomeScreen then it navigates to that page, below is that code which works if I use it directly in Home Screen
*{/* <Text style={styles.textTitle}>Highlights</Text>
<TouchableOpacity
onPress={() => this.props.navigation.navigate('Highlights')}>
<Text style={[styles.textTitle, {color: '#F483A7'}]}>View All</Text>
</TouchableOpacity> */}*
I think there is something wrong I am doing is using the props or referencing to the navigation page
I also tried creating a const for navigation
const {navigate} = this.props.navigation
this didn't worked either
I have created a card component when I pass title and subtitle its work when I add the image it's giving me an error this is my cardcomponent code
import React from "react";
import {
View,
Text,
StyleSheet,
Button,
Image,
ImageBackground,
} from "react-native";
import colors from "../config/colors";
import AppText from "./AppText";
export default function CardList({ title, subtitle, image }) {
return (
<View style={styles.card}>
<Image source={require(image)} />
<AppText>{title}</AppText>
<AppText>{subtitle}</AppText>
</View>
);
}
const styles = StyleSheet.create({
card: {
backgroundColor: colors.white,
borderRadius: 15,
marginBottom: 20,
paddingTop: 100,
},
});
this is my app file
import React from "react";
import WelcomeScreen from "./app/screen/WelcomeScreen";
import { View, Text, StyleSheet, Button } from "react-native";
import AppText from "./app/components/AppText";
import AppButton from "./app/components/AppButton";
import CardList from "./app/components/CardList";
export default function App() {
return (
<View style={styles.cardStyle}>
<CardList
title="need blood"
subtitle="$100"
image={require("./app/assets/child.png")}
/>
</View>
);
}
const styles = StyleSheet.create({
cardStyle: {
backgroundColor: "#f8f4f4",
padding: 20,
paddingTop: 100,
},
});
I am adding some pictures here which before adding image prop
when I add image its giving me error
I am just importing my files from a custom created folder component to App.js file and import key in not working on manually created files while working on other imports on React and React native.
I am making an application of React-Native using Expo CliCode Image
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import test from './component/test'; // This line is producing error
export default function App() {
return (
<View style={styles.container}>
<test/>
<Text>Open up App.js to start working on your app!</Text>
</View>
);
}
const styles = StyleSheet.create({`enter code here`
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});
TEST COMPONENT :----
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
export default class Test extends React.Component {
render(){
return (
<View style={styles.container}>
<Text>Login js file</Text>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});
PLEASE VISIT CODE IMAGE line 3 is causing error
https://i.stack.imgur.com/WRYAt.png
I'm trying to add a logo to react-native code using Image tag but after I add Image tag it gives me below error
TypeError: (0, _reactNative.default) is not a function. (In '(0, _reactNative.default)("./../assets/logo.png")', '(0, _reactNative.default)' is an instance of Object)
* component\Login.js:12:34 in render
- node_modules\react-native\Libraries\Renderer\oss\ReactNativeRenderer-dev.js:11581:21 in finishClassComponent
- node_modules\react-native\Libraries\Renderer\oss\ReactNativeRenderer-dev.js:11509:4 in updateClassComponent
- ... 18 more stack frames from framework internals
below is my code
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import Image from "react-native";
import require from 'react-native'
import {ImageBackground} from "react-native";
export default class Login extends React.Component {
render() {
return (
<View style={styles.container}>
<View style={styles.logoContainer}>
<Image sorce={require('./../assets/logo.png')}/>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
},
logoContainer:{
alignItems:'center',
justifyContent:'center',
},
});
my App.js
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import Login from './component/Login'
export default function App() {
return (
<View style={styles.container}>
<Login/>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});
so what is wrong here?
You have a wrong Image import.
Use it like this:
import { StyleSheet, Text, View, Image } from 'react-native';
const myImageSource = require('./../assets/logo.png'); // Double check that you have the image at that path
Fix the typo from image source:
<Image source={myImageSource}/>
If still not working add full content of your files and RN version to your question.