Uppercase Button in nativebase - javascript

I have a button with face book icon
<Button iconLeft block > <Icon name='logo-facebook' /> <Text>Login with facebook</Text> </Button>
with text "Login with facebook" But it displays "LOGIN WITH FACEBOOK" .I am tried with capitalize={false} but no hope.Is there any way?
NB version:2.2.1


you are using Native Base Right ? maybe you can try this one.
you can change this code:
<Button iconLeft block >
<Icon name='logo-facebook' />
<Text> {'Login with facebook'.toUpperCase()} </Text>
</Button>
to this :
<Button iconLeft block >
<Icon name='logo-facebook' />
<Text uppercase={false}> {'Login with facebook'.toUpperCase()} </Text>
</Button>
just only using uppercase={false} in your <text> tag, hope it can help you :)


Try this :
text.capitalize-lowercase {text-transform: lowercase;}
text.capitalize-uppercase {text-transform: uppercase;}
<button iconleft block> <icon name='logo-facebook' /> <text class="capitalize-uppercase">Login with facebook</text> </button>
<br/> <br/>
<button iconleft block> <icon name='logo-facebook' /> <text class="capitalize-lowercase">Login with facebook</text> </button>


I think text transform currently not support by react native style.So you can try something like this
<Button iconLeft block >
<Icon name='logo-facebook' />
<Text> {'Login with facebook'.toUpperCase()} </Text>
</Button>

Related

Antd card loading is not working properly

I'm using antd card component to display the card and loading is not working, I gave the loading based on the api response, i got the correct response but the loading is not working for me.... if i set the loading value to true it is working fine but it is not working while i'm passing the data.
useEffect(() => {
let keys = [{ key: "get_search_records", loading: true }];
dispatch(
dynamicRequest(keys, get_search_records_query, {
searchString: state,
})
);
}, [state]);
I'm getting data and changing the loading here and it is working fine, the loading also changes perfectly but it is not reflecting in the card component
<Box>
<HStack marginLeft={10} space={20} flexWrap={'wrap'}>
{items?.map((item, index) => (
<VStack marginTop={"30px"} space={10} flexWrap={"wrap"}>
<Card
loading={loading}
hoverable
style={{ height: 430 ,width: 250, borderRadius: "10px", marginTop:30, marginBottom: 30 }}
cover={
<HStack>
<Box width={"50%"}>
<div class="card_div">
<div style={{marginTop:"5px"}}>
<Text color={"white"} alignItems="center" marginLeft={"17px"} marginTop={"7px"} >
Hot
</Text>
</div>
</div>
</Box>
<Box flexDirection="row-reverse" marginTop={"-30px"} marginRight={"10px"} padding={"5px"}>
<Typography.Link onClick={handleAddCart}>
<Tooltip className="tooltip-wishlist" color=" #3BB77E" title="Add to wishlist" placement="bottom">
<AiOutlineHeart size={"25px"}/>
</Tooltip>
</Typography.Link>
</Box>
</HStack>
}
>
<Box alignContent={"center"} height="170px">
{/* <AspectRatio w="100%" ratio={16/9}> */}
<Image
alt="Image"
src={item?.vendor_product?.product?.gallery?.[0]}
// width="90%"
preview={false}
/>
</Box>
<Box alignContent={"center"}>
<Text bold> </Text>
<VStack space={1.5}>
<Box height="130px">
<Text color={"#adadad"}>
{item.vendor_product.product.category.name}
</Text>
<Text onPress={handleClick} onMouseOver={mouseOver} onMouseOut={MouseOut} bold>{item.name} </Text>
<Rating count={item?.product_rating?.[0]?.rating}/>
<Text onPress={handleTextPress}>
By <span style={{ color: "#22c55e" }} onMouseOver={mouseOverVendor} onMouseOut={mouseOutVendor} >Theni FBO</span>
</Text>
</Box>
<HStack justifyContent="space-between">
{item.discount && (
<Text color="green.500">₹ {item.base_price}</Text>
)}
<Text strikeThrough color="green.500">
₹ {item.selling_price}
</Text>
<Button onClick={addCart} className="cart-btn" icon={<BsCart3 />}>
Add
</Button>
</HStack>
</VStack>
</Box>
</Card>
</VStack>
))}
</HStack>)}
</Box>
this is my antd card code... anyone please tell me why the loading is not working properly.

Adding a button/icon to each row of a Semantic UI React dropdown

Related to this question How to add a button within a dropdown menu?
Working Codesandbox
I have a Semantic UI React Dropdown and I want to place a little, clickable, delete icon on each row of the dropdown, similar to this photo.
How can I do that?

you can do like this
<Dropdown
text='Filter'
icon='filter'
floating
labeled
button
className='icon'
>
<Dropdown.Menu>
<Dropdown.Header icon='tags' content='Filter by tag' />
<Dropdown.Divider />
<Dropdown.Item>
<Icon name='attention' className='right floated' />
Important
</Dropdown.Item>
<Dropdown.Item>
<Icon name='comment' className='right floated' />
Announcement
</Dropdown.Item>
<Dropdown.Item>
<Icon name='conversation' className='right floated' />
Discussion
</Dropdown.Item>
</Dropdown.Menu>
</Dropdown>
if you have some dynamic data then simple map it
<Dropdown
text='Filter'
icon='filter'
floating
labeled
button
className='icon'
>
<Dropdown.Menu>
<Dropdown.Header icon='tags' content='Filter by tag' />
<Dropdown.Divider />
{
options.map(item => <Dropdown.Item>
<Icon name={item.icon} className='right floated' />
{item.name}
</Dropdown.Item>)
}
</Dropdown.Menu>
</Dropdown>

how to change TextInput value using Id or Attribute?

I have unlimited inputs and I can't count all of them. I want to change the value of these by pressing the buttons but I can't set state for all of these because these can be over 1000 of Inputs or less than 10.
How can I change the values by pressing any plus or negative buttons of each input?
import React, { Component } from 'react';
import { StyleSheet, View, ToastAndroid } from 'react-native';
import { Content, List, ListItem, Thumbnail, Text, Body, Right, Left, Button, Icon, Input } from 'native-base';
let basket = [];
let Numberr = 0;
let ProductCount = [];
class MyAppList extends Component<Props> {
constructor(props){
super(props);
this.state={
quantity:'0'
}
}
UserOrderBasket = (ProductId,InputId)=>{
document,getElementById(InputId).value=Numberr;
Numberr++;
}
render() {
return (
<Content>
<View style={{ flex:1, flexDirection: 'row' }}>
<Button primary style={styles.fakeButtons1} onPress={()=>this.props.navigation.navigate('MainPage')}>
<Icon name='arrow-back' />
</Button>
<Button primary style={styles.fakeButtons2} onPress={()=>this.props.navigation.navigate('Cart',{ORDERS:basket})}>
<Icon name="cart" style={{color:'#fff'}} />
</Button>
</View>
<List>
<ListItem>
<Left>
<Body style={{ flex:1, flexDirection: 'row' }}>
<Button icon transparent style={{width:36,padding:0}}>
<Left>
<Icon type="FontAwesome" name="minus-circle" style={{fontSize:40,color:'blue'}}/>
</Left>
</Button>
<Input
id="input-1"
value="0"
/>
<Button icon transparent style={{width:36,padding:0}} onPress={this.UserOrderBasket.bind(this,1,'input-1')}>
<Left>
<Icon type="FontAwesome" name='plus-circle' style={{fontSize:40,color:'blue'}}/>
</Left>
</Button>
</Body>
</Left>
<Body>
<Text>گوشت گوسفندی</Text>
<Text note>توضیحات کوتاه در باره محصول ... </Text>
</Body>
<Thumbnail square size={50} source={{ uri: 'http://192.168.1.102/studioaleph/img/image-15-630x825.jpg' }} />
</ListItem>
<ListItem>
<Left>
<Body style={{ flex:1, flexDirection: 'row' }}>
<Button icon transparent style={{width:36,padding:0}}>
<Left>
<Icon type="FontAwesome" name="minus-circle" style={{fontSize:40,color:'blue'}}/>
</Left>
</Button>
<Input
id="input-2"
value="0"
/>
<Button icon transparent style={{width:36,padding:0}} onPress={this.UserOrderBasket.bind(this,1,'input-1')}>
<Left>
<Icon type="FontAwesome" name='plus-circle' style={{fontSize:40,color:'blue'}}/>
</Left>
</Button>
</Body>
</Left>
<Body>
<Text>گوشت گوسفندی</Text>
<Text note>توضیحات کوتاه در باره محصول ... </Text>
</Body>
<Thumbnail square size={50} source={{ uri: 'http://192.168.1.102/studioaleph/img/image-15-630x825.jpg' }} />
</ListItem>
<ListItem>
<Left>
<Body style={{ flex:1, flexDirection: 'row' }}>
<Button icon transparent style={{width:36,padding:0}}>
<Left>
<Icon type="FontAwesome" name="minus-circle" style={{fontSize:40,color:'blue'}}/>
</Left>
</Button>
<Input
id="input-3"
value="0"
/>
<Button icon transparent style={{width:36,padding:0}} onPress={this.UserOrderBasket.bind(this,1,'input-1')}>
<Left>
<Icon type="FontAwesome" name='plus-circle' style={{fontSize:40,color:'blue'}}/>
</Left>
</Button>
</Body>
</Left>
<Body>
<Text>گوشت گوسفندی</Text>
<Text note>توضیحات کوتاه در باره محصول ... </Text>
</Body>
<Thumbnail square size={50} source={{ uri: 'http://192.168.1.102/studioaleph/img/image-15-630x825.jpg' }} />
</ListItem>
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
<ListItem>
<Left>
<Body style={{ flex:1, flexDirection: 'row' }}>
<Button icon transparent style={{width:36,padding:0}}>
<Left>
<Icon type="FontAwesome" name="minus-circle" style={{fontSize:40,color:'blue'}}/>
</Left>
</Button>
<Input
id="input-300"
value="0"
/>
<Button icon transparent style={{width:36,padding:0}} onPress={this.UserOrderBasket.bind(this,1,'input-1')}>
<Left>
<Icon type="FontAwesome" name='plus-circle' style={{fontSize:40,color:'blue'}}/>
</Left>
</Button>
</Body>
</Left>
<Body>
<Text>گوشت گوسفندی</Text>
<Text note>توضیحات کوتاه در باره محصول ... </Text>
</Body>
<Thumbnail square size={50} source={{ uri: 'http://192.168.1.102/studioaleph/img/image-15-630x825.jpg' }} />
</ListItem>
</List>
</Content>
);
}
}
const styles = StyleSheet.create({
ListTextB:{
fontSize:16,
fontFamily:'IRANSans',
paddingTop:5,
textAlign:'right'
},
fakeButtons1:{
width:'50%',
borderRadius:0,
alignItems: 'center',
},
fakeButtons2:{
width:'50%',
borderRadius:0,
justifyContent: 'flex-end'
},
shoppingButtons:{
borderRadius:50,
padding:5
},
shoppingText:
{
fontSize:18,
textAlign:'center',
padding:0,
backgroundColor:'#fff'
}
});
export {MyAppList};
how can I solve this problem? It's a mobile store application.

Reveal [Semantic UI] in React

My goal is to convert some of the code here http://jsbin.com/qipufujibi/edit?html,output to Semantic UI React.
This is my attempt:
<Card>
<Reveal animated='fade'>
<Reveal.Content visible>
<Image src="imgSrc"/>
</Reveal.Content>
<Reveal.Content hidden>
<Card.Content>
<h3>Minions</h3>
<Card.Meta>
<span className='date'>2015</span>
</Card.Meta>
<Card.Description>
Matt
</Card.Description>
</Card.Content>
<Card.Content extra>
<a>
<Icon name='user' />
22 Friends
</a>
</Card.Content>
</Reveal.Content>
</Reveal>
</Card>
However, it does not work properly.
It loses the style https://i.imgur.com/Ypx5Nag.gifv. How can I fix it?

I can't see five icons rendering in the footer using native base?

Hey guys I am trying to get five icon in the footer of the screen using native base but I can only see three icon can any body help me out what is the issue? I am referring to this link.
Here is the code.
<Container>
<Footer>
<Button transparent>
<Icon size={30} color={'#fff'} name={'ios-telephone'} />
</Button>
<Button transparent>
<Icon size={25} color={'#fff'} name={'ios-cycle'}/>
</Button>
<Button transparent>
<Icon size={25} color={'#fff'} name={'ios-home'}/>
</Button>
<Button transparent>
<Icon size={25} color={'#fff'} name={'ios-menu'}/>
</Button>
<Button transparent>
<Icon size={25} color={'#fff'} name={'chatbox'}/>
</Button>
</Footer>
</Container>
Can any body help me out what is the issue? Thanks a lot in advance.

You are referring old version of NSP
Check the latest docs for same

Categories