I have the following ui-component:
...
import stylePropType from 'react-style-proptype';
const Heading = ({
...
marginBottom,
strong
}) => (
<Header
style={{
marginBottom,
fontWeight: strong ? 'bold' : 'normal',
}}
>....
</Header>
);
Heading.defaultProps = {
children: <div />,
marginBottom: 4,
strong: false,
style: {},
};
Heading.propTypes = {
children: PropTypes.node,
marginBottom: PropTypes.number,
strong: PropTypes.bool,
style: stylePropType,
};
How can I combine the current style logic (marginBottom and fontWeight) with optionally additional styles passed in as a prop? Is there a way to combine the two or merge them?
You can use the spread syntax (...) on your passed in styles:
<Header
style={{
marginBottom,
fontWeight: strong ? 'bold' : 'normal',
...this.props.style
}}
>....
</Header>
Related
I'm trying to use the city of a user as a default value to google-places-auto-complete input.
I've tried to use cityAutoComplete?.setAddressText(city) outside of the ref prop but it won't work, and I've tried using it inside of the Ref prop and then it works but won't let me type anything else into that input (in order to change city for exmple).
here's the code which lets me put a default value but won't let me type into the input.
<GooglePlacesAutocomplete
ref={(ref) => {
cityAutoComplete = ref
cityAutoComplete?.setAddressText(city)
}}
styles={{
textInputContainer: { height: scale(50) },
container: {
width: "100%",
backgroundColor: "transparent",
},
textInput: {
borderBottomWidth: 1,
marginTop: scale(10),
textAlign: "center",
fontSize: 18,
fontFamily: "Heebo-Regular",
backgroundColor: "transparent",
paddingBottom: 4,
width: scale(200),
},
}}
placeholder={strings("City")}
value={city}
onPress={(data, details = null) => {
setCity(data.terms[0].value);
setNeedReload(true);
}}
query={{
types: "(cities)",
key: globals.GOOGLE_API_KEY,
language: "he",
}}
/>
New to Material-UI and getting spammed with the same error in console after adding the following component.
Full Error:
Material-UI: The key clicked provided to the classes prop is not implemented in ForwardRef(ExpansionPanelSummary).
You can only override one of the following: root,expanded,focused,disabled,content,expandIcon.
const CustomExpansionPanelSummary = withStyles(theme => ({
expandIcon: {
order: -1,
padding: '0',
margin: '17px 0px'
},
clicked:{
color: '#0000FF',
},
unclicked:{
color: '#FF0000',
},
root:{
fontFamily: 'Roboto',
fontSize: '12px',
lineHeight: '1.31',
letterSpacing: '3px',
marginTop: '0px,
marginBottom: '0px,
},
expanded: {
'&$expanded': {
marginTop: '10px',
marginBottom: '10px',
minHeight:0
},
},
}))(ExpansionPanelSummary);
<CustomExpansionPanelSummary
classes ={{
content:(props.clicked ? "customcss":"customcss-name")
}}
expandIcon={<ArrowDropDownIcon
className={props.clicked ? "customcss":"customcss-name"}
/>}
>
{props.clicked} clicked item
</CustomExpansionPanelSummary>
There was a gap. I have an application being developed for testing.
Error:View config getter callback for component input must be a function (received undefined). Make sure to start component names with a capital letter.
I have 3 files, data.js(here I take information on the test (all sorts of initial data) ), testMath.js(this file brings it all together ) , Questions.js(and in this there is an interaction with data )
Help, I need somebody))
data.js:
export const data = {
testName:"TestName",
questions:[
{
title:"question?",
code: "___ d = 123;",
variants : [
{title: "const", "flag": true},
{title: "var"},
{title: "let"}
]
},
{
title:"question?",
code: "let с;",
variants : [
{title: "undefined", "flag": true},
{title: "null"},
{title: "number"}
]
},
{
title:"question",
code: "",
variants : [
{title: "вариант1", "flag": true},
{title: "вариант2", "flag": true},
{title: "вариант3"}
]
},{
title:"question",
code: "",
variants : [
{"text": "1", "flag": "const"}
]
}
]
}
export default data
testMath.js
import { ReactDOM } from 'react';
import { StyleSheet, View, Text, Image } from 'react-native';
import { gStyle } from '../styles/style';
import { data } from './data'
import Questions from './Questions'
export default function testMath() {
return (
<View style={gStyle.main}>
<Text style={styles.h1}>Hello! </Text>
<Questions data={data} />
</View>
);
}
const styles = StyleSheet.create({
h1: {
textAlign: 'center',
fontSize: 24,
fontFamily: 'Oswald-Bold',
}
});
Questions.js:
import { View, Text, StyleSheet } from 'react-native';
import {input} from "react-native-web";
export default function Questions({ data }) {
let questions = data.questions
questions = questions.map(function(el, index){
let j = 0
let variants = el.variants.map(function(e, i) {
j++
return (
<View>
<input type="checkbox" id={'id' + j} />
<label for={'id' + j}> {el.title}</label>
</View>
)
})
return (
<View>
<Text style={styles.questionHead}> {el.title} </Text>
<Text style={styles.questionExample}>{el.code} </Text>
{variants}
</View>
)
})
return (
<View>
<Text style={styles.testTeme}>
{data.testName}
</Text>
{questions}
</View>
)
}
const styles = StyleSheet.create({
testTeme: {
textAlign: 'center',
paddingTop: 15,
fontFamily: 'Oswald-Bold',
fontSize: 25,
},
questionHead: {
textAlign: 'center',
paddingTop: 15,
fontFamily: 'Oswald-Bold',
fontSize: 20,
},
questionExample: {
paddingTop: 10,
fontSize: 18,
textAlign: 'center',
fontFamily: 'Oswald-light',
},
})```
You're using HTML elements inside Questions.js:
<input type="checkbox" id={'id' + j} />
<label for={'id' + j}> {el.title}</label>
Read more about react-native TextInput
I have a list of text elements that I want to underline when clicked. If I add the text decoration to the tabText then obviously it is applied to all items. How can I make sure that the when I click on another tab, the underline from the previous tab gets removed?
Is there any way I can add or remove items from the style element upon clicking on an item?
//onPress={() => {}}>
const tabs = [
{
id: 1,
text: 'Alle List',
},
{
id: 2,
text: 'Second',
},
];
export const Tab: React.FunctionComponent = () => {
return (
<View style={styles.tabView}>
{tabs.map((item: any) => (
<View>
<Text style={styles.tabText}>{item.text}</Text>
</View>
))}
</View>
);
};
const styles = StyleSheet.create({
tabView: {
paddingTop: moderateScale(15),
paddingLeft: moderateScale(20),
paddingRight: moderateScale(20),
flexDirection: 'row',
justifyContent: 'space-between',
},
tabText: {
color: 'white',
paddingBottom: moderateScale(10),
//textDecorationLine: 'underline'
},
});
Codesandbox (with tabText items as an array too):
https://snack.expo.io/#nhammad/shallow-watermelon
You can use useState to save the selected index and then apply another style based on the selected index. Here is a quick modification to your script and the snack link is at the end.
import * as React from 'react';
import { Text, View, StyleSheet, TouchableOpacity } from 'react-native';
const tabs = [
{
id: 1,
text: 'All Friends',
},
{
id: 2,
text: 'Second',
},
{
id: 3,
text: 'Third',
},
];
export default function App() {
const [selected, setSelected] = React.useState(null)
return (
<View style={styles.container}>
<View style={styles.tabView}>
{tabs.map((item: any, index) => (
<TouchableOpacity onPress={()=>setSelected(index)}>
<View>
<Text style={[styles.tabText,selected===index?styles.selected:null]}>{item.text}</Text>
</View>
</TouchableOpacity>
))}
</View>
</View>
);
}
const styles = StyleSheet.create({
tabView: {
paddingTop: 15,
paddingLeft: 20,
paddingRight: 20,
flexDirection: 'row',
justifyContent: 'space-between',
},
tabText: {
color: 'black',
paddingBottom: 10,
},
selected: {
textDecorationLine: 'underline'
},
});
https://snack.expo.io/#saachitech/da6280
You can add different styles for your tab depending on active route
<Text style={[(this.props.activeRouteName == route.routeName) ? styles.tabActiveText: styles.tabText]}>{item.text}</Text>
And then in the styles
tabActiveText: {
color: 'white',
paddingBottom: moderateScale(10),
textDecorationLine: 'underline'
}
Its base on https://github.com/react-native-training/reactxp-starter
Also I am new to TypeScript!
The renderIf is a regular js function, for some reason I got the error with type. I am not really clear where the type should have been to let the renderIf function run. Any thought or pointer will be great! Since ReactXP is really a thin wrapper above React Native.
Thanks!
/*
* This file demonstrates a basic ReactXP app.
*/
import RX = require('reactxp');
import renderIf = require('./util/renderIf');
//import { VirtualListView, VirtualListViewItemInfo } from 'virtuallistview';
const styles = {
container: RX.Styles.createViewStyle({
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#0a84c1'
}),
helloWorld: RX.Styles.createTextStyle({
color: 'white',
fontSize: 48,
fontWeight: 'bold',
marginBottom: 28
}),
welcome: RX.Styles.createTextStyle({
color: 'white',
fontSize: 32,
marginBottom: 12
}),
instructions: RX.Styles.createTextStyle({
fontSize: 16,
color: '#aaa',
marginBottom: 40
}),
docLink: RX.Styles.createLinkStyle({
fontSize: 16,
color: 'blue'
}),
emotionalInput: RX.Styles.createLinkStyle({
fontSize: 32,
height: 32,
}),
questionPage: RX.Styles.createTextStyle({
color: 'white',
fontSize: 48,
fontWeight: 'bold',
marginBottom: 28
}),
questionPageShow: RX.Styles.createTextStyle({
color: 'white',
fontSize: 48,
fontWeight: 'bold',
marginBottom: 28
}),
questionPageHide: RX.Styles.createTextStyle({
color: 'white',
fontSize: 48,
fontWeight: 'bold',
marginBottom: 28,
}),
};
// interface QuestionItem extends VirtualListViewItemInfo {
// text: string;
// }
interface QuestionProps {
}
interface QuestionState {
questionNow: number;
}
class App extends RX.Component<QuestionProps, QuestionState> {
private _translationValue: RX.Animated.Value;
private _translationValue2: RX.Animated.Value;
private _animatedStyle: RX.Types.AnimatedTextStyleRuleSet;
private _animatedStyleNextQuestion: RX.Types.AnimatedTextStyleRuleSet;
constructor() {
super();
this.state = {
questionNow: 1,
};
this._translationValue = new RX.Animated.Value(-100);
this._animatedStyle = RX.Styles.createAnimatedTextStyle({
transform: [
{
translateY: this._translationValue
}
]
});
this._translationValue2 = new RX.Animated.Value(-100);
this._animatedStyleNextQuestion = RX.Styles.createAnimatedTextStyle({
transform: [
{
translateY: this._translationValue2
}
]
});
}
componentDidMount() {
// let animation = RX.Animated.timing(this._translationValue, {
// toValue: 0,
// easing: RX.Animated.Easing.OutBack(),
// duration: 500
// }
// );
// animation.start();
let animationParalle = RX.Animated.parallel([
RX.Animated.timing(this._translationValue, {
toValue: 0,
easing: RX.Animated.Easing.OutBack(),
duration: 1000
}),
RX.Animated.timing(this._translationValue2, {
toValue: 0,
easing: RX.Animated.Easing.OutBack(),
duration: 3000
}),
]);
animationParalle.start();
}
guessResult(e: any) {
console.log(e);
}
pressAction(e: any) {
console.log(e);
}
goNext(event: any) {
console.log(event);
const newCount = this.state.questionNow + 1;
this.setState({
questionNow: newCount,
});
console.log(newCount);
}
render(): JSX.Element | null {
console.log(renderIf);
return (
<RX.View style={ styles.container }>
<RX.Animated.Text style={ [styles.helloWorld, this._animatedStyle] }>
Go Go Go
</RX.Animated.Text>
<RX.Animated.Text style={ [styles.questionPage, this._animatedStyleNextQuestion] }>
NEXT Question!
</RX.Animated.Text>
{renderIf(
this.state.questionNow === 1,
<RX.Text> New Stuff</RX.Text>
)}
{/*
Question 1
*/}
<RX.Text style={ styles.welcome }>
Question {this.state.questionNow}
How are you?
<RX.Button
style={ styles.welcome }
onPressOut={this.goNext.bind(this)}>
Great!
</RX.Button>
<RX.Button
style={ styles.welcome }
onPressOut={this.goNext.bind(this)}>
Great!
</RX.Button>
</RX.Text>
{/*
Question 2
*/}
<RX.Text style={ styles.welcome }>
Question {this.state.questionNow}
How are you?
<RX.Button
style={ styles.welcome }
onPressOut={this.goNext.bind(this)}>
Great!
</RX.Button>
<RX.Button
style={ styles.welcome }
onPressOut={this.goNext.bind(this)}>
Great!
</RX.Button>
</RX.Text>
<RX.TextInput style={ styles.emotionalInput } onChangeText={this.guessResult}/>
<RX.Text>Text</RX.Text>
</RX.View>
);
}
}
export = App;
error
ERROR in [at-loader] ./src/App.tsx:154:18
TS2349: Cannot invoke an expression whose type lacks a call signature. Type 'typeof "/Users/app/src/util/renderIf"' has no compatible call signatures.
renderIf.ts
export default function renderIf(condition: any, content: any) {
if (condition) {
return content;
} else {
return null;
}
}
Wow.... its crazy, actually its because I did not add .default when I call renderIf.... BUT I can't really even do import renderIf = require('./util/renderIf').default; so I have to do import renderIf = require('./util/renderIf');.. which is strange