We Keep Coding

Is there a way to set numberOfLines to 1 of each entry in the dropdown picker? (react-native-dropdown-picker)

Code:
<DropDownPicker
//code here
style={styles.dropdown_container}
textStyle={styles.dropdown_itemstyle}
props={{style: styles.dropdown_container}}
itemProps={{
style: {
height: 30,
paddingHorizontal: '3%',
flexDirection: 'row',
},
}}
showTickIcon={false}
flatListProps={{
style: {
backgroundColor: COLORS.dirty_white,
borderRadius: 6,
borderColor: COLORS.gray_filter,
borderWidth: 1,
paddingTop: '2%',
},
}}
dropDownContainerStyle={{
borderWidth: 0,
}}
zIndex={5001}
/>
//code here
<View style={styles.bottomContainer}>
<Text numberOfLines={1}>
'Personal - I have problem in my birth certificate, my passport, my
criminal case, etc.'
</Text>
<Button
buttonStyle={[styles.clientBtnStyle, {backgroundColor: '#5E1B89'}]}>
<Text style={{color: 'white', fontWeight: 'bold', fontSize: 12}}>
Submit
</Text>
</Button>
</View>
The result that is wanted for each item in the dropdown picker is the one above the submit button. I have tried numberOfLines in labelProps but unfortunately it doesn't work. Is there any way to fix this?

Have you tried to truncate text using ellipsizeMode

There are at least two different solutions.
Render custom list item
https://github.com/hossein-zare/react-native-dropdown-picker/issues/460
Following pull gets merged or you make such changes manually before it happends
https://github.com/hossein-zare/react-native-dropdown-picker/pull/542
As I'm aware of labelProps with numberOfLines: 1 should work when picker is not open so that text would not wrap. But for it to work in list items there is no prop yet to easily achieve this.

Material-UI: The key `clicked` provided to the classes prop is not implemented in ForwardRef(ExpansionPanelSummary)

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>

How to blur text in React Native

The question is simple. I have a View with a Text component in it. I just want this text to be blurred initially.
The only solution I saw to blur something in React Native is for an Image via this "react-native-blur".
How can we blur a Text component in React Native?
Info: I just want to make an app where the user does not see the answer directly (via blurring).

If you don't want to install react-native-blur / expo-blur or it's not working for you, this is a workaround/hack that mimics the look of blurred text in a View. The values can be adjusted as necessary.
<View
style={{
height: 3,
width: 70,
shadowOpacity: 1,
shadowColor: '#000',
shadowOffset: { width: 10, height: 10 },
shadowRadius: 5,
elevation: 5,
borderWidth: 0.5,
borderColor: "white",
backgroundColor: "rgba(255, 255, 255, 1)"
}}
/>

Install react-native-blur:
npm install react-native-blur
import BlurView from 'react-native-blur';
...
<BlurView blurType="light" style={styles.blur}>
...

You can simply use css to do it, feel free you change the amount of opacity, offset, color, radius as your requirement
<Text
style={{
color: "#fff0",
textShadowColor: "rgba(255,255,255,0.8)",
textShadowOffset: {
width: 0,
height: 0,
},
textShadowRadius: 10,
fontSize: 14,
fontWeight: "600",
textTransform: "capitalize",
}}
>
Blurred
</Text>

Setting TextInput placeholder vertically center in ios - React Native

I'm using a TextInput in my react-native application and found a strange issue. The placeholder used in my TextInput is not vertically centered in ios devices but it's centered in android devices. How can i fix this issue?
Code
<View style={{marginBottom: 20}}>
<Text style={styles.subTitle}>Description</Text>
<TextInput style={[styles.inputFull_80]} multiline={true} placeholder="Enter group description" underlineColorAndroid='transparent'/>
</View>
Style
const styles = {
container: {
//TODO: Remove once added properly
marginTop: Constants.statusBarHeight,
padding: 20,
backgroundColor: 'white',
},
subTitle: {
fontFamily: 'gotham',
marginBottom: 5,
fontSize: 16,
color: '#4A4A50',
},
inputFull_80: {
minHeight: 80,
borderWidth: 1,
borderColor: '#E6E6E6',
fontFamily: 'gotham_light',
borderRadius: 4,
fontSize: 14,
padding: 10,
},
};

Add textAlign={'center'} as a property to the TextInput component

Font weight in fabric.js library for HTML5 canvas

I've been playing with canvas and the awesome fabric library. I can't get text to display in anything other than the normal weight. i.e.
var text2 = new fabric.Text('tseting', {
fontsize: 50,
fontFamily: 'Arial',
fontStyle = 'bold',
left: 100,
top: 100,
fill:"#FF0000"
});
canvas2.add(text2);
The 'bold' tag doesn't get applied. When I created the font.js file suing cufon, I included the bold and italic fonts. Any ideas gratefully received.

You've used the wrong property, and a typo ( the fontStyle = 'bold',).
Use this instead:
var text2 = new fabric.Text('testing', {
fontSize: 50,
fontFamily: 'Arial',
fontWeight: 'bold',
left: 100,
top: 100,
fill: "#FF0000"
});
canvas2.add(text2);

fontStyle refers to italic / normal.
Try fontWeight: bold or fontWeight: 700?