I am having a requirement where I need to create overlay with disabled background using React-Native's ActivityIndicator, the functionality is working fine but I am finding it hard to create overlay that too at the centre of the screen because of my code structure
Code
<ScrollView alwaysBounceHorizontal={false} horizontal={false} contentContainerStyle={{ flexGrow: 1 }}>
<View>
<Test1 listData={testData1} />
<Spacing />
<Test2 listData={testData2} />
</View >}
</ScrollView>
Test1 and Test2 are two independent list components
Related
I am currently facing some problem about sidebar navigation. Every time I click the menu below the scrollbar went go to top again. I want it to steady like when I click the bottom menu it will stays its current view. Kindly check file below. Hope you can help me. or suggest another ways to redirect pages from sidebar Thanks.
{nav.nav &&
nav.nav.map((sub, subIndex) => (
<ListItem
key={subIndex}
button
component={NavLink}
to={sub.link}
end={true}
>
<ListItemIcon sx={{ minWidth: "40px" }}>
{sub.icon}
</ListItemIcon>
<ListItemText
primary={sub.name}
primaryTypographyProps={{
variant: "body2",
}}
/>
</ListItem>
))}
video gif
Having an issue displaying images. Looking at the documentation and I don't know what I am missing.
I can't get the image component to show.
This is all from WhatsNew.js, I am calling an IG logo
import { ReactComponent as Instagram2 } from '../images/instagram2.svg'
Below I am also calling for a media file that is in the same folder but I get a non working image.
<CardMedia
image='../images/blog-post-01.png'
style={{height: 140}} />
<CardContent>
Here is my live link and this is the repo GitHub
I think what you are doing now is right. Your image address/url is wrong. I tried this with a url of an image on the internet and it works.
<Card>
<CardMedia
image="https://images.unsplash.com/photo-1494548162494-384bba4ab999?ixlib=rb-1.2.1&w=1000&q=80"
style={{ height: 140 }}
/>
</Card>
Try this in the URL. It might work.
image="/static/images/blog-post-01.png"
OR import the image
import blog from '../images/blog-post-01.png';
<CardMedia
image={blog}
style={{ height: 140 }}
/>
the image to show must be given as object like this :
<CardMedia
image={Instagram2 }
style={{height: 140}} />
<CardContent>
I'm creating a React-native app, which has a question-answer system, and this menu is intended for confirming a chosen answer.
How can I open react-native-popup-menu without having a separate Menutrigger?
<Menu renderer={renderers.SlideInMenu}>
<MenuTrigger>
<Text>
{answers}
</Text>
</MenuTrigger>
<MenuOptions>
<MenuOption>
<View>
<h2> {title}</h2>
<h3> {text}</h3>
</View>
</MenuOption>
<MenuOption>
<View style={styles.btnContainer}>
<Button title= "CANCEL" onPress={onCancel}/>
<Button title= "CONTINUE" onPress={onConfirm}/>
</View>
</MenuOption>
</MenuOptions>
</Menu>
);
In this code the "{answers} trigger activates when I push a button, and the {answers} then become the button that triggers the menu which then triggers the title and the body to slide in. How can I trigger the title and the body without getting the extra step in?
I'm very new to Material UI and React. I've got a very odd UI issue and I'm hoping someone here can point out what I did wrong.
What I am doing:
I have a List. For each list items, I want some button to point to different URLs. Here's the code of my list. This is somewhat pseudo code. Each "list item" is generated using map that goes over a data saved in JSON format:
<List>
<ListItem button component="a" href={infoUrl}>
<ListItemAvatar>
<Avatar src={itemIcon} />
</ListItemAvatar>
<ListItemText
primary={this.props.project.name_with_namespace}
secondary={this.props.project.description}
/>
<ListItemSecondaryAction>
<Tooltip id="button-report" title="Report">
<IconButton area-label="Report" href={reportUrl}>
<AssessmentIcon />
</IconButton>
</Tooltip>
<Tooltip id="button-codeRepo" title="Code Repository">
<IconButton area-label="Code Repository" href={repoUrl}>
<CodeIcon />
</IconButton>
</Tooltip>
</ListItemSecondaryAction>
</ListItem>
</List>
Problem:
The list is showing up with all the list items. Primary and Secondary texts as well as the avatars for each list item is also showing up properly, including the 2 "IconButton".
The problem is the tooltip that was added to the IconButton under the ListItemSecondaryAction. For the very first list item, everything is good. For all the other list items, I have to move my mouse pointer to the bottom edge of the icon buttons in order to be able to Click and also see the tooltip.
If I remove the tooltips completely, I don't have any issue with the clicks. I can move the mouse pointer to the middle or other areas within the circular ring of the icon buttons and perform a click.
Am I not using the Tooltip properly here? Tried both Chrome and FireFox and seeing the same issue.
Just add parent div and try to apply tooltip on that; it worked for me:
<Tooltip title="delete" placement="start-top">
<div>
<AiOutlineDelete style={{ fontSize: '30px', alignSelf: 'center' }}/>
</div>
</Tooltip>
Put the Tooltip around the Icon, not the Button:
<IconButton area-label="Report" href={reportUrl}>
<Tooltip id="button-report" title="Report">
<AssessmentIcon />
</Tooltip>
</IconButton>
i am using semantic-ui (via react-semantic-ui). i want a little area for logon in the bottom of my menu column.
i have this:
i want this:
i did the above using position: absolute; bottom: 0, but i'm betting there's a semantic positioning class or react-semantic-ui component to use that would achieve it w/out manual styles
my components are as follows:
<Menu vertical fixed={'left'} inverted>
<Menu.Item name='account' active />
<Menu.Item name='settings' active={false} />
<Menu.Menu>
<img width="50px" height="50px" style={{ backgroundColor: 'red' }} />
<Menu.Item name='logout' active={false} onClick={() => null} />
</Menu.Menu>
</Menu>
I would use the Segment element. The attached prop is what you'll find most useful and you can easily customize it to become a full menu.
<Segment attached='bottom'></Segment>
You should easily be able to cusomize this to fit your stylistic needs.