|
Skip to content
| https://pythonnative.com/concepts/components/#components |
|
| https://pythonnative.com/ |
|
| javascript:void(0) |
|
pythonnative/pythonnative
| https://github.com/pythonnative/pythonnative |
|
Home
| https://pythonnative.com/ |
|
Getting Started
| https://pythonnative.com/getting-started/ |
|
Concepts
| https://pythonnative.com/concepts/mental-model/ |
|
Guides
| https://pythonnative.com/guides/android/ |
|
Building
| https://pythonnative.com/guides/configuration/ |
|
Examples
| https://pythonnative.com/examples/ |
|
API Reference
| https://pythonnative.com/api/pythonnative/ |
|
Meta
| https://pythonnative.com/meta/style-guide/ |
|
| https://pythonnative.com/ |
|
pythonnative/pythonnative
| https://github.com/pythonnative/pythonnative |
|
Home
| https://pythonnative.com/ |
|
Getting Started
| https://pythonnative.com/getting-started/ |
|
Mental Model
| https://pythonnative.com/concepts/mental-model/ |
|
Architecture
| https://pythonnative.com/concepts/architecture/ |
|
Components
| https://pythonnative.com/concepts/components/ |
|
Element functions
| https://pythonnative.com/concepts/components/#element-functions |
|
Available components
| https://pythonnative.com/concepts/components/#available-components |
|
Flex layout model
| https://pythonnative.com/concepts/components/#flex-layout-model |
|
Flex container properties (inside style)
| https://pythonnative.com/concepts/components/#flex-container-properties-inside-style |
|
Child layout properties
| https://pythonnative.com/concepts/components/#child-layout-properties |
|
Example: centering content
| https://pythonnative.com/concepts/components/#example-centering-content |
|
Example: horizontal row with spacing
| https://pythonnative.com/concepts/components/#example-horizontal-row-with-spacing |
|
Function components: the building block
| https://pythonnative.com/concepts/components/#function-components-the-building-block |
|
State and re-rendering
| https://pythonnative.com/concepts/components/#state-and-re-rendering |
|
Composing components
| https://pythonnative.com/concepts/components/#composing-components |
|
Available hooks
| https://pythonnative.com/concepts/components/#available-hooks |
|
Custom hooks
| https://pythonnative.com/concepts/components/#custom-hooks |
|
Context and Provider
| https://pythonnative.com/concepts/components/#context-and-provider |
|
Platform detection
| https://pythonnative.com/concepts/components/#platform-detection |
|
Next steps
| https://pythonnative.com/concepts/components/#next-steps |
|
Hooks
| https://pythonnative.com/concepts/hooks/ |
|
Lifecycle
| https://pythonnative.com/concepts/lifecycle/ |
|
Reconciliation
| https://pythonnative.com/concepts/reconciliation/ |
|
Layout Engine
| https://pythonnative.com/concepts/layout/ |
|
Native Views
| https://pythonnative.com/concepts/native-views/ |
|
Android
| https://pythonnative.com/guides/android/ |
|
iOS
| https://pythonnative.com/guides/ios/ |
|
Desktop Preview
| https://pythonnative.com/guides/desktop-preview/ |
|
Navigation
| https://pythonnative.com/guides/navigation/ |
|
Styling
| https://pythonnative.com/guides/styling/ |
|
Animations
| https://pythonnative.com/guides/animations/ |
|
Gestures
| https://pythonnative.com/guides/gestures/ |
|
Lists
| https://pythonnative.com/guides/lists/ |
|
Async + Data
| https://pythonnative.com/guides/async/ |
|
Platform & Accessibility
| https://pythonnative.com/guides/platform-accessibility/ |
|
Native Modules
| https://pythonnative.com/guides/native-modules/ |
|
Custom Native Components
| https://pythonnative.com/guides/custom-native-components/ |
|
Hot Reload
| https://pythonnative.com/guides/hot-reload/ |
|
Error Boundaries
| https://pythonnative.com/guides/error-boundaries/ |
|
Testing
| https://pythonnative.com/guides/testing/ |
|
Configuration
| https://pythonnative.com/guides/configuration/ |
|
Permissions
| https://pythonnative.com/guides/permissions/ |
|
Building for Release
| https://pythonnative.com/guides/building-for-release/ |
|
Overview
| https://pythonnative.com/examples/ |
|
Hello World
| https://pythonnative.com/examples/hello-world/ |
|
Counter
| https://pythonnative.com/examples/counter/ |
|
Forms
| https://pythonnative.com/examples/forms/ |
|
Lists
| https://pythonnative.com/examples/lists/ |
|
Navigation
| https://pythonnative.com/examples/navigation/ |
|
Package
| https://pythonnative.com/api/pythonnative/ |
|
Components
| https://pythonnative.com/api/components/ |
|
Hooks
| https://pythonnative.com/api/hooks/ |
|
Animated
| https://pythonnative.com/api/animated/ |
|
Gestures
| https://pythonnative.com/api/gestures/ |
|
Alerts
| https://pythonnative.com/api/alerts/ |
|
Async runtime
| https://pythonnative.com/api/runtime/ |
|
Appearance
| https://pythonnative.com/api/appearance/ |
|
Images
| https://pythonnative.com/api/images/ |
|
Network
| https://pythonnative.com/api/net/ |
|
Storage
| https://pythonnative.com/api/storage/ |
|
Platform
| https://pythonnative.com/api/platform/ |
|
Element
| https://pythonnative.com/api/element/ |
|
Screen
| https://pythonnative.com/api/screen/ |
|
Reconciler
| https://pythonnative.com/api/reconciler/ |
|
Layout
| https://pythonnative.com/api/layout/ |
|
Style
| https://pythonnative.com/api/style/ |
|
Navigation
| https://pythonnative.com/api/navigation/ |
|
Native modules
| https://pythonnative.com/api/native_modules/ |
|
Native views
| https://pythonnative.com/api/native_views/ |
|
SDK
| https://pythonnative.com/api/sdk/ |
|
Hot reload
| https://pythonnative.com/api/hot_reload/ |
|
Utilities
| https://pythonnative.com/api/utils/ |
|
CLI (pn)
| https://pythonnative.com/api/cli/ |
|
Component properties
| https://pythonnative.com/api/component-properties/ |
|
Style Guide
| https://pythonnative.com/meta/style-guide/ |
|
Contributing
| https://pythonnative.com/meta/contributing/ |
|
FAQ
| https://pythonnative.com/meta/faq/ |
|
Troubleshooting
| https://pythonnative.com/meta/troubleshooting/ |
|
Changelog
| https://pythonnative.com/meta/changelog/ |
|
Element functions
| https://pythonnative.com/concepts/components/#element-functions |
|
Available components
| https://pythonnative.com/concepts/components/#available-components |
|
Flex layout model
| https://pythonnative.com/concepts/components/#flex-layout-model |
|
Flex container properties (inside style)
| https://pythonnative.com/concepts/components/#flex-container-properties-inside-style |
|
Child layout properties
| https://pythonnative.com/concepts/components/#child-layout-properties |
|
Example: centering content
| https://pythonnative.com/concepts/components/#example-centering-content |
|
Example: horizontal row with spacing
| https://pythonnative.com/concepts/components/#example-horizontal-row-with-spacing |
|
Function components: the building block
| https://pythonnative.com/concepts/components/#function-components-the-building-block |
|
State and re-rendering
| https://pythonnative.com/concepts/components/#state-and-re-rendering |
|
Composing components
| https://pythonnative.com/concepts/components/#composing-components |
|
Available hooks
| https://pythonnative.com/concepts/components/#available-hooks |
|
Custom hooks
| https://pythonnative.com/concepts/components/#custom-hooks |
|
Context and Provider
| https://pythonnative.com/concepts/components/#context-and-provider |
|
Platform detection
| https://pythonnative.com/concepts/components/#platform-detection |
|
Next steps
| https://pythonnative.com/concepts/components/#next-steps |
|
| https://github.com/pythonnative/pythonnative/edit/main/docs/concepts/components.md |
|
| https://github.com/pythonnative/pythonnative/raw/main/docs/concepts/components.md |
| ¶ | https://pythonnative.com/concepts/components/#components |
| ¶ | https://pythonnative.com/concepts/components/#element-functions |
| Element | https://pythonnative.com/api/element/#pythonnative.element.Element |
| Reconciler | https://pythonnative.com/api/reconciler/#pythonnative.reconciler.Reconciler |
| https://pythonnative.com/concepts/components/#__codelineno-0-1 |
| https://pythonnative.com/concepts/components/#__codelineno-0-2 |
| https://pythonnative.com/concepts/components/#__codelineno-0-3 |
| https://pythonnative.com/concepts/components/#__codelineno-0-4 |
| https://pythonnative.com/concepts/components/#__codelineno-0-5 |
| https://pythonnative.com/concepts/components/#__codelineno-0-6 |
| https://pythonnative.com/concepts/components/#__codelineno-0-7 |
| https://pythonnative.com/concepts/components/#__codelineno-0-8 |
| https://pythonnative.com/concepts/components/#__codelineno-0-9 |
| ¶ | https://pythonnative.com/concepts/components/#available-components |
| View(*children, style=...) | https://pythonnative.com/api/components/#pythonnative.components.View |
| Column(*children, style=...) | https://pythonnative.com/api/components/#pythonnative.components.Column |
| Row(*children, style=...) | https://pythonnative.com/api/components/#pythonnative.components.Row |
| ScrollView(child, style=...) | https://pythonnative.com/api/components/#pythonnative.components.ScrollView |
| SafeAreaView(*children, style=...) | https://pythonnative.com/api/components/#pythonnative.components.SafeAreaView |
| Spacer(size, flex) | https://pythonnative.com/api/components/#pythonnative.components.Spacer |
| Text(text, style=...) | https://pythonnative.com/api/components/#pythonnative.components.Text |
| Image(source, style=...) | https://pythonnative.com/api/components/#pythonnative.components.Image |
| WebView(url) | https://pythonnative.com/api/components/#pythonnative.components.WebView |
| Button(title, on_click, style=...) | https://pythonnative.com/api/components/#pythonnative.components.Button |
| TextInput(value, placeholder, on_change, secure, style=...) | https://pythonnative.com/api/components/#pythonnative.components.TextInput |
| Switch(value, on_change) | https://pythonnative.com/api/components/#pythonnative.components.Switch |
| Slider(value, min_value, max_value, on_change) | https://pythonnative.com/api/components/#pythonnative.components.Slider |
| Pressable(child, on_press, on_long_press) | https://pythonnative.com/api/components/#pythonnative.components.Pressable |
| ProgressBar(value) | https://pythonnative.com/api/components/#pythonnative.components.ProgressBar |
| ActivityIndicator(animating) | https://pythonnative.com/api/components/#pythonnative.components.ActivityIndicator |
| Modal(*children, visible, on_dismiss, title) | https://pythonnative.com/api/components/#pythonnative.components.Modal |
| ErrorBoundary(child, fallback) | https://pythonnative.com/api/components/#pythonnative.components.ErrorBoundary |
| Fragment(*children) | https://pythonnative.com/api/components/#pythonnative.components.Fragment |
| FlatList(data, render_item, key_extractor, item_height, ...) | https://pythonnative.com/api/components/#pythonnative.components.FlatList |
| SectionList(sections, render_item, render_section_header, item_height, ...) | https://pythonnative.com/api/components/#pythonnative.components.SectionList |
| StatusBar(bar_style, background_color, hidden) | https://pythonnative.com/api/components/#pythonnative.components.StatusBar |
| KeyboardAvoidingView(*children, behavior) | https://pythonnative.com/api/components/#pythonnative.components.KeyboardAvoidingView |
| RefreshControl(refreshing, on_refresh) | https://pythonnative.com/api/components/#pythonnative.components.RefreshControl |
| Picker(value, items, on_change, placeholder) | https://pythonnative.com/api/components/#pythonnative.components.Picker |
| Alert.show(title, message) | https://pythonnative.com/api/alerts/#pythonnative.alerts.Alert.show |
| await Alert.confirm(title, message) | https://pythonnative.com/api/alerts/#pythonnative.alerts.Alert.confirm |
| await Alert.choose(title, options=[...]) | https://pythonnative.com/api/alerts/#pythonnative.alerts.Alert.choose |
| AnimatedValue | https://pythonnative.com/api/animated/#pythonnative.animated.AnimatedValue |
| Animations guide | https://pythonnative.com/guides/animations/ |
| ¶ | https://pythonnative.com/concepts/components/#flex-layout-model |
| ¶ | https://pythonnative.com/concepts/components/#flex-container-properties-inside-style |
| ¶ | https://pythonnative.com/concepts/components/#child-layout-properties |
| ¶ | https://pythonnative.com/concepts/components/#example-centering-content |
| https://pythonnative.com/concepts/components/#__codelineno-1-1 |
| https://pythonnative.com/concepts/components/#__codelineno-1-2 |
| https://pythonnative.com/concepts/components/#__codelineno-1-3 |
| https://pythonnative.com/concepts/components/#__codelineno-1-4 |
| ¶ | https://pythonnative.com/concepts/components/#example-horizontal-row-with-spacing |
| https://pythonnative.com/concepts/components/#__codelineno-2-1 |
| https://pythonnative.com/concepts/components/#__codelineno-2-2 |
| https://pythonnative.com/concepts/components/#__codelineno-2-3 |
| https://pythonnative.com/concepts/components/#__codelineno-2-4 |
| https://pythonnative.com/concepts/components/#__codelineno-2-5 |
| https://pythonnative.com/concepts/components/#__codelineno-2-6 |
| ¶ | https://pythonnative.com/concepts/components/#function-components-the-building-block |
| https://pythonnative.com/concepts/components/#__codelineno-3-1 |
| https://pythonnative.com/concepts/components/#__codelineno-3-2 |
| https://pythonnative.com/concepts/components/#__codelineno-3-3 |
| https://pythonnative.com/concepts/components/#__codelineno-3-4 |
| create_screen | https://pythonnative.com/api/screen/#pythonnative.screen.create_screen |
| ¶ | https://pythonnative.com/concepts/components/#state-and-re-rendering |
| use_state(initial) | https://pythonnative.com/api/hooks/#pythonnative.hooks.use_state |
| https://pythonnative.com/concepts/components/#__codelineno-4-1 |
| https://pythonnative.com/concepts/components/#__codelineno-4-2 |
| https://pythonnative.com/concepts/components/#__codelineno-4-3 |
| https://pythonnative.com/concepts/components/#__codelineno-4-4 |
| https://pythonnative.com/concepts/components/#__codelineno-4-5 |
| https://pythonnative.com/concepts/components/#__codelineno-4-6 |
| https://pythonnative.com/concepts/components/#__codelineno-4-7 |
| https://pythonnative.com/concepts/components/#__codelineno-4-8 |
| https://pythonnative.com/concepts/components/#__codelineno-4-9 |
| ¶ | https://pythonnative.com/concepts/components/#composing-components |
| https://pythonnative.com/concepts/components/#__codelineno-5-1 |
| https://pythonnative.com/concepts/components/#__codelineno-5-2 |
| https://pythonnative.com/concepts/components/#__codelineno-5-3 |
| https://pythonnative.com/concepts/components/#__codelineno-5-4 |
| https://pythonnative.com/concepts/components/#__codelineno-5-5 |
| https://pythonnative.com/concepts/components/#__codelineno-5-6 |
| https://pythonnative.com/concepts/components/#__codelineno-5-7 |
| https://pythonnative.com/concepts/components/#__codelineno-5-8 |
| https://pythonnative.com/concepts/components/#__codelineno-5-9 |
| https://pythonnative.com/concepts/components/#__codelineno-5-10 |
| https://pythonnative.com/concepts/components/#__codelineno-5-11 |
| https://pythonnative.com/concepts/components/#__codelineno-5-12 |
| https://pythonnative.com/concepts/components/#__codelineno-5-13 |
| https://pythonnative.com/concepts/components/#__codelineno-5-14 |
| https://pythonnative.com/concepts/components/#__codelineno-5-15 |
| https://pythonnative.com/concepts/components/#__codelineno-5-16 |
| https://pythonnative.com/concepts/components/#__codelineno-5-17 |
| https://pythonnative.com/concepts/components/#__codelineno-5-18 |
| https://pythonnative.com/concepts/components/#__codelineno-5-19 |
| https://pythonnative.com/concepts/components/#__codelineno-5-20 |
| https://pythonnative.com/concepts/components/#__codelineno-5-21 |
| https://pythonnative.com/concepts/components/#__codelineno-5-22 |
| ¶ | https://pythonnative.com/concepts/components/#available-hooks |
| use_state(initial) | https://pythonnative.com/api/hooks/#pythonnative.hooks.use_state |
| use_reducer(reducer, initial_state) | https://pythonnative.com/api/hooks/#pythonnative.hooks.use_reducer |
| use_effect(effect, deps) | https://pythonnative.com/api/hooks/#pythonnative.hooks.use_effect |
| use_memo(factory, deps) | https://pythonnative.com/api/hooks/#pythonnative.hooks.use_memo |
| use_callback(fn, deps) | https://pythonnative.com/api/hooks/#pythonnative.hooks.use_callback |
| use_ref(initial) | https://pythonnative.com/api/hooks/#pythonnative.hooks.use_ref |
| use_animated_value(initial) | https://pythonnative.com/api/animated/#pythonnative.animated.use_animated_value |
| AnimatedValue | https://pythonnative.com/api/animated/#pythonnative.animated.AnimatedValue |
| use_context(context) | https://pythonnative.com/api/hooks/#pythonnative.hooks.use_context |
| use_navigation() | https://pythonnative.com/api/hooks/#pythonnative.hooks.use_navigation |
| use_route() | https://pythonnative.com/api/navigation/#pythonnative.navigation.use_route |
| use_focus_effect(effect, deps) | https://pythonnative.com/api/navigation/#pythonnative.navigation.use_focus_effect |
| use_window_dimensions() | https://pythonnative.com/api/hooks/#pythonnative.hooks.use_window_dimensions |
| use_safe_area_insets() | https://pythonnative.com/api/hooks/#pythonnative.hooks.use_safe_area_insets |
| use_keyboard_height() | https://pythonnative.com/api/hooks/#pythonnative.hooks.use_keyboard_height |
| @memo | https://pythonnative.com/api/hooks/#pythonnative.hooks.memo |
| ¶ | https://pythonnative.com/concepts/components/#custom-hooks |
| https://pythonnative.com/concepts/components/#__codelineno-6-1 |
| https://pythonnative.com/concepts/components/#__codelineno-6-2 |
| https://pythonnative.com/concepts/components/#__codelineno-6-3 |
| https://pythonnative.com/concepts/components/#__codelineno-6-4 |
| https://pythonnative.com/concepts/components/#__codelineno-6-5 |
| ¶ | https://pythonnative.com/concepts/components/#context-and-provider |
| https://pythonnative.com/concepts/components/#__codelineno-7-1 |
| https://pythonnative.com/concepts/components/#__codelineno-7-2 |
| https://pythonnative.com/concepts/components/#__codelineno-7-3 |
| https://pythonnative.com/concepts/components/#__codelineno-7-4 |
| https://pythonnative.com/concepts/components/#__codelineno-7-5 |
| https://pythonnative.com/concepts/components/#__codelineno-7-6 |
| https://pythonnative.com/concepts/components/#__codelineno-7-7 |
| https://pythonnative.com/concepts/components/#__codelineno-7-8 |
| https://pythonnative.com/concepts/components/#__codelineno-7-9 |
| https://pythonnative.com/concepts/components/#__codelineno-7-10 |
| https://pythonnative.com/concepts/components/#__codelineno-7-11 |
| https://pythonnative.com/concepts/components/#__codelineno-7-12 |
| ¶ | https://pythonnative.com/concepts/components/#platform-detection |
| Platform | https://pythonnative.com/api/platform/#pythonnative.platform.Platform |
| https://pythonnative.com/concepts/components/#__codelineno-8-1 |
| https://pythonnative.com/concepts/components/#__codelineno-8-2 |
| https://pythonnative.com/concepts/components/#__codelineno-8-3 |
| https://pythonnative.com/concepts/components/#__codelineno-8-4 |
| https://pythonnative.com/concepts/components/#__codelineno-8-5 |
| https://pythonnative.com/concepts/components/#__codelineno-8-6 |
| Desktop preview guide | https://pythonnative.com/guides/desktop-preview/ |
| https://pythonnative.com/concepts/components/#__codelineno-9-1 |
| ¶ | https://pythonnative.com/concepts/components/#next-steps |
| Architecture | https://pythonnative.com/concepts/architecture/ |
| Hooks | https://pythonnative.com/concepts/hooks/ |
| Examples | https://pythonnative.com/examples/ |
| Components | https://pythonnative.com/api/components/ |
|
| https://github.com/pythonnative/pythonnative |
|
| https://pypi.org/project/pythonnative/ |